JavaScript has a feature that allows events to bubble up through the DOM hierarchy. These means handlers can be placed on parent or grandparent elements to handle events for the child. In this video we discuss and provide examples of event delegation which is also know as event propagation or event bubbling.
Would you like to help keep this channel going?
https://www.patreon.com/allthingsjavascript
For a complete list of all our tutorials:
http://www.allthingsjavascript.com/youtube.html
Access to EVERY course (get 2 months free): https://www.skillshare.com/r/profile/Steven-Hancock/24508
Courses offered on Udemy at a discount:
Getting Started: https://www.udemy.com/learn-modern-javascript-getting-started/?couponCode=GETTINGSTARTED2019
Advanced Topics: https://www.udemy.com/learn-modern-javascript-advanced-topics/?couponCode=ADVANCED2019
Mastering Regular Expressions in JavaScript:
https://www.udemy.com/mastering-regular-expressions-in-javascript/?couponCode=YOUTUBE
Functional Programming in JavaScript: https://www.udemy.com/functional-programming-in-javascript-a-practical-guide/?couponCode=YOUTUBE19
NEW Mastering JavaScript Arrays: https://www.udemy.com/course/mastering-javascript-arrays/?couponCode=YOUTUBE19
#javascript #AllThingsJavaScriptLLC
Original source
8 responses to “JavaScript Questions: What is Event Delegation, Event Propagation, Event Bubbling?”
Great lesson!! Thank you
Very helpful, thanks!
so what if the <li > tag had a <p> element inside it but u wanted to target the <li> tag given that the <p> element inherits the width and height of the li.
As I understand it event bubbling isn’t event propagation, but it is one of the ways of event propagation. Event propagation consists of capturing and bubbling, you can choose one of them in eventHandler, default one is bubbling.
Well this method gets the job done in most of the situations, but when you want to assign an event listener to an element, and there are children elements of that, the event.target will refer to the one you clicked on, so the handler will not be called. You have to make a loop that "bubbles" up from the target, till the target.parentNode is not the one we were looking for (also until we don't reach the parent element).
For examle:
<ul>
<li>
<span>Title</span>
<p>Content etc etc</p>
</li>
…
</ul>
in this case, if we click on the span, the event.target will be the that span, instead of the "li"
U r master
brilliant stuff
Great quick tutorial!