• Monday , 6 April 2020

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

Code Canyon



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

3d Ocean

Related Posts

8 Comments

  1. Diogo Soares
    September 28, 2019 at 05:12

    Great lesson!! Thank you

  2. Stephanie Tihanyi
    September 28, 2019 at 05:12

    Very helpful, thanks!

  3. keepit_ Local
    September 28, 2019 at 05:12

    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.

  4. Samira Allahverdiyeva
    September 28, 2019 at 05:12

    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.

  5. Cheatman97
    September 28, 2019 at 05:12

    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"

  6. seenuvasan V
    September 28, 2019 at 05:12

    U r master

  7. Yaniv Salman
    September 28, 2019 at 05:12

    brilliant stuff

  8. Eric F
    September 28, 2019 at 05:12

    Great quick tutorial!

Leave A Comment

You must be logged in to post a comment.