JavaScript Questions: What is Event Delegation, Event Propagation, Event Bubbling?




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?”

  1. 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"

Leave a Reply