Page Title

Bubbling vs Capturing

If you don't add a true or false value as the third parameter in addEventListener() then it's false by default, meaning it's bubbling. False is bubbling, true is capturing.

Below we have a div and a paragraph, the paragraph is inside the div, when the div is clicked a second paragraph is created, when the paragraph (the first one, not the second) is clicked it makes the second paragraph which was created by the function that was executed when div was clicked change to blue. So, if you click the paragraph, both the paragraph's and the div's click events will trigger, but which is handled first, and which is handled second?

For the red box below I used bubbling on the div's click event, by writing div.addEventListener("click", click_div, false), I could remove the third parameter completely and it would still be the same thing, bubbling makes it so that when you click the paragraph the paragraph's click event gets handled first followed by the div's click event, therefore, since the second paragraph won't yet exist when the function that is supposed to change it's color to blue activates only the second paragraph will be created (by the div's click event that is handled after) and it's color will not change, only after you press the paragraph a second time it will work (since the second paragraph will now be found).

Click Me!

In the blue box below, I only changed false to true, meaning I changed it to capturing, by writing div.addEventListener("click", click_div, true), capturing makes it so the div's click event is handled first followed by the paragraph's click event, so if you click the paragraph a second paragraph will be created and then it will be changed to blue without needing to click a second time like before.

Click Me!

Bubbling vs Capturing (JavaScript)