Trying to understand JavaScript Event capturing and event bubbling?

Hi All,

I am trying to understand event capturing and event bubbling. Can you please help me with this issue. I am struck with below piece of code.

My Question is-
Why clicking on “This is a heading” is not giving two alerts? While clicking on some checkbox is giving two alerts.

jsfiddle

<body id = "body-id">

 <h1>This is a Heading</h1>

 <label id="wow"><input type="checkbox" name="checkbox" value="value">Some checkbox</label>

 <script>

     var fn = function(){
      alert("Hello from body tag");
     }

     var fn1 = function() {
      alert("Hello form checkbox");
     }
    
      e1.addEventListener("click", fn, false);
     var e1 = document.getElementById("body-id");

      var wow = document.getElementById("wow");

      wow.addEventListener("click", fn1, false);

  </script>
</body>

thanks for reply! I just changed body_id to body-id.

I figured out why it is showing 2 sets of:

Hello from checkbox
Hello  from body tag

Actually, if you just click on the checkbox (not the label) it will show only once the following:

Hello from checkbox
Hello  from body tag

It is when you click on the label, that you get the four alerts.

For a good description of what is going on, see this link on Stackoverflow

1 Like

To avoid confusion I have created two jsfiddles.

https://jsfiddle.net/v891/f9urwfsy/

https://jsfiddle.net/v891/LLtndjbw/

first example- When I click on “This is a heading” I am only getting one alert and in the second example- When I click on “Some Checkbox” I am getting two alerts.

It is really the same answer. The link I provided explains what is happening.