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?

For a complete list of all our tutorials:

#javascript #AllThingsJavaScriptLLC

[samik]

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.

[miw]

the way you area explaining it I get a immediate relief that I'm gonna nail this topic today. Love the way you teach bro 100% earned my subscribe.

[gladstonross]

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.

[cheatman]

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"