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.


#5

My understanding is that when you click on the <label>, you are clicking on both the <body> and the <label>. Since you have event listeners added to both of those elements, you get two alerts. When you click the <h1> element (or any other element without an event listener added), only the one for the <body> element fires.


#6

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


#7

You’re only getting one alert on “This is a heading” because you only added a click listener to your checkbox and the body tag.

Let’s look at the checkbox to see what’s happening:

  1. You click on the checkbox, and a click event is triggered on the checkbox. The checkbox doesn’t have a click handler so nothing happens (the label does but the checkbox doesn’t).
  2. The event “bubbles” up one level to the parent label element. The label has a click handler, so it’s triggered and “Hello form checkbox” is alerted.
  3. The event bubbles another level to the next parent, which is the body element. The body has a click handler. The handler is triggered and “Hello from body tag” is alerted.

This is what happens with the heading:

  1. You click on the h1 element and a click event is triggered. The h1 doesn’t have a click handler so nothing happens.
  2. The event bubbles up to its parent, body. body has a click handler, so it gets triggered.

Does that help?

Edit: The link @rmdawson71 posted explains it better than my answer does so definitely read that.


#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.


#9

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