Learn Event Delegation In 10 Minutes

Event listeners seem like a simple concept at first, but as you dive deeper in you may run into a ton of issues and bugs. Most likely these issues occur because you are not properly using event delegation. In this video I will break down what event delegation is so you can start using it in your own projects.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:34 - The Problem With Events
03:00 - Basic Event Delegation
07:22 - Advanced Event Delegation

#EventDelegation #WDS #JavaScript

[reactoranime]

For every inner child elements you might need pointer-events:none; otherwise you may think you clicking inside .box but event.target is childnode like <a>href..

[ekchills]

I've become more confident in web development just watching your videos kyle

[jfftck]

This technique is also useful for making the click outside of the modal dialogs close the dialog. You look for click events on the document and then use event.stopPropagation() on the dialog to prevent the dialog from closing, what will happen is the event starts at the top element under the cursor and then will bubble that event up to each parent until the event.stopPropagation() is called or it reaches the document root.

The best way to use this in a framework, is to have a component that contains the dialog and add/removes the event from the document root and also applies the event.stopPropagation() to a click event on the dialog. This results in not having to track anything globally or on parent components.

Just thought I’d share an example of how this is useful in a project.

[psycotrompus]

My brain was flooded with different use cases after watching this. Great stuff!🤟

[dgdev]

Thanks Kyle. I have been following you part of my software development journey past 2.5 years . You are always concise well structured.

[crim-son]

Nice tutorial, but you're screwed if the target element has nested children, you then now have to be checking with ". closest(...), .querySelector(...)" before you can carry out your actions, this works if the element you're targeting doesn't have much nestedchildren

[shgyskzer]

I rarely use event delegation. While i know this is just a quick video on the concept, it does mask the problems and complexity and trade-offs.

Suppose you have a button with an SVG or basically any child. There are different phases of an event and how it propagates, but the important thing here is that it could be the child element dispatching the click event, not the button itself.

In some cases, it may be better to use `e.target.closest()` that'd match either the element or any parent element... But that just ends up being a trade-off between CPU usage and memory. You're saving a little bit of memory but adding extra computation time to the handler of every click event, even if it isn't the intended target.

Personally, i prefer to generally avoid event delegation except when you want a whole bunch of children of a specific container to all call a certain function. Otherwise, I'd target just the desired elements or use a MutationObserver.

[seanwilliams]

OMG this is so timely. I have a an employee directory and when I click on an employee card, a modal pops up. However, when I load new employee cards with AJAX, the modal wouldn't work. Now I know why!!!

Forever indebted for this video!

Spoke too soon - didn't work in my application for some reason.

[Georgggg]

You can safely ditch this practice, it doesn't add any value, but add indirection with DOM events, which is painful to debug.

When your events stop working due to some element inside boxes, or stopPropagation somewhere.. good luck.

[lesalmin]

Just by watching this one tutorial video and learning everything done in it, you can already create the most important tasks of a beginner javascript coder.

[S_sword]

Using the event listeners at the whole document may not be the best idea.... Instead, wrap the elements and add the listener to the parent... If you added it to the document, it will call the listener every time which slows the page down, however, adding the mousemove listener to the document might be a good idea if you need to use the cursor's position for something..

[EricFressange]

Thank you for this example.
I was looking for how to do it in vanilla JS.
It was very easy to do delegate with jQuery.
I see just a little issue with your code : the event won't trigger if there is another element inside.
You need to adjust your code to match also with the parents

[AllinOne-lyxi]

Thank you sir i am stuck on this problem for many days now i understand how it works 👍👍

[isaidstream]

Not knowing what is a Event Delegation is the reason why I Ieft javascript 5 years ago, and all related to programming. Now i can do a proper To-do app and more... This css property has help me too: pointer-event: none

[fiatlux]

I feel like a tiny flower learning to code (self taught) and your videos are like tidal waves lol. Great content, you deserve every like and every sub.

[yomajo]

Python "web" flask dev, working on second project. I used to attach event listeners on newly added elements. Will try this method next time situation presents itself. Thank you!

[luquillasnano]

This is such a neat explanation. Thanks, hopefully I'm gonna make use of it right now.

[MrRagday]

Thank you. From this example I understand that component approach >>> event delegation ;)

[moritzfinke]

Thank you for the video, it was really helpful.

[lannsterroy]

I was studying event delegations 1-2 hour ago and Kyle dropped this video. Am i dreaming or something :))