Trying to understand JavaScript Event capturing and event bubbling?

1

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>
4

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

8

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.