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 thoughts on “JavaScript Questions: What is Event Delegation, Event Propagation, Event Bubbling?

  • September 28, 2019 at 05:12
    Permalink

    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.

  • September 28, 2019 at 05:12
    Permalink

    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.

  • September 28, 2019 at 05:12
    Permalink

    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