Event Delegation in JavaScript, Simplified

Event Delegation is an event handling pattern based up on the concept of Event Bubbling in the DOM. The idea is that you delegate the handling of an event (triggered on an element) to its parent or ancestor element.
This can improve performance in your applications as you use fewer event listeners for the same logic.
Learn about Event Bubbling here: • Event Bubbling in Java...
Learn about the querySelector document method here: • HOW TO SELECT DOM ELEM...
_____
Subscribe to My Channel: bit.ly/deeecode
_____
🌟 About Me:
Dillion Megida, creator of DEEECODE, is a Software Engineer, Developer Advocate and a Content Creator passionate about simplifying topics around Tech via articles and videos.
_____
⚡️ Connect with me:
Personal youtube: / dillionmegida
Personal website: dillionmegida....
Twitter: / iamdillion
Instagram: / deeecode
LinkedIn: / dillionmegida
GitHub: github.com/dil...
_____
#deeecode

[@hybs9473]

Maaan! Thank you for this. You use simple english to explain things, straight to the point, very concise with a lot of examples. I easily understood what event delegation is. Only gripe I had is the 'target' event not explained enough, but that's on me, I need to research more on that. Thank you very much. Might check out your other tutorials because of how well you teach the topics. Hope you get a lot of subscribers so you get motivated to post more good tutorials like this.

[@deeecode]

Thank you so much for the helpful feedback 🙏🏾 I appreciate it. And thanks for the kind words also You mean the target object not being explained clearly?

[@hybs9473]

@@deeecode Hey man, Yes, that target object, but that's on me, I have to research that on my own to learn further. Can I request some topic for other videos? Can you do a tutorial for promise, async and await and a separate video talking about JSON and API's? I'm currently enrolled on UDEMY but I like your teaching style more (slow and clear that is more suitable for beginners). Thank you man, don't sweat my request too much, I understand that it's pretty hard to slip these things in your schedule.

[@DillionMegida]

@@hybs9473 I appreciate your feedback. I'll push in event.target on my list. Promises, async and await are already there--scheduling a time is the problem. Will also add JSON and APIs to the list. But what I can say right now is that expect a video on event.target on my channel soon. Will leave a comment here when I do that :) Thanks again for the engagement. And I love that my videos are simple enough 😇

[@deeecode]

Here is the video on event target kzbin.info/www/bejne/hGrZdot3jLWspLc 😇 I would love your feedback on it after watching, if it's simple enough. Thank you

[@joelfuelling8725]

@@DillionMegida Fun tip, change your e.target to a variable right away you can reference so you're not writing e.target everywhere.

[@HarshSingh-hk8fe]

that's really a cleanest explaination no bullshit straight to the point thanks alot bro

[@deeecode]

So glad you find it helpful 😊

[@FranklinAirlonger-jm3pj]

You’re good bro, the simplicity of your classes are superb

[@deeecode]

I appreciate that! Glad you like them

[@tommuc8538]

Wow, that was super clear and simply. Thx.

[@deeecode]

Glad you liked it! You're welcome

[@mlindatech]

Man you are wonderfully simple English straight to the point beautiful✌️🙏

[@deeecode]

Thanks for the feedback 🙌🏾

[@Al-taram2025]

Your teaching style is really amazing ❤❤❤

[@deeecode]

Glad you enjoyed it

[@timeless268]

The explanation is AWESOME ! Thank you so much❤

[@deeecode]

So so glad it was helpful!

[@JD-hq1kn]

You really simplify things.. Thanks man !!

[@deeecode]

you're super super welcome :)

[@JD-hq1kn]

@@deeecode how can I get in touch with you bro ?

[@victorartb]

Super clear! Thanks Mate!

[@deeecode]

So glad to hear. you're welcome!

[@macmee7440]

Thanks bro, great video

[@riyatiwari7178]

Thank you so much, loved it! Keep uploading this series. ❣❣

[@deeecode]

Thank you! Will do!

[@Wildrespect]

Nahh… this tut right here is dope🔥

[@deeecode]

I’m glad you find this so 😀

[@shehnazameer1209]

that was helpful. thank you!

[@deeecode]

I'm so glad to hear

[@BriariusTitan]

Thanks for the help, you clarified it well.

[@deeecode]

You're welcome!

[@PaulJBurgess]

Thank you! I'll be back to this channel, I'm pretty sure.

[@godugunurumanoj733]

Awesome explanation i loved it.

[@deeecode]

Glad it was helpful!

[@godugunurumanoj733]

Yes I am confident about this concept

[@codingwithvikas7484]

Love from India ❤

[@shafee-e]

maaaaaaaaaaaaaaaaan!! you're a legend.

[@deeecode]

Glad you found the video helpful :)

[@malikmartin]

Thanks! This should help me write cleaner (and more optimized) code!

[@deeecode]

Glad it helped!

[@himxai]

Thanks love your explanation 💯

[@deeecode]

Glad it was helpful!

[@RishabhJain-uv7zj]

Nice explanation. Thanks

[@deeecode]

Glad it was helpful!

[@codelery414]

Awesome 👍

[@york2301]

Keep up the good work!

[@deeecode]

Thank you so much!

[@himankhoranyy124]

Useful, tnx

[@user-nm7in5cm3q]

great video - thank you!!

[@deeecode]

You're very much welcome!

[@hmellahi]

Loooove it, keep it uP!

[@deeecode]

Thank you! Will do!

[@fatimaiqra2169]

thanks a lot!

[@estrellademar6937]

thank you so much!!! i

[@keddycameron2723]

very clear! thank u

[@deeecode]

You are welcome!

[@youtubejproasters1224]

Hey man nice video, out of curiosity, what if you had to put in these 3 buttons a different action to happen after a click event, would you make the if statement with their ids as validator? And you would make 3 if statements for different action if event.target === button 1 for example etc etc ?

[@mlindatech]

I really like your question man!

[@shishirbhurtel7978]

See the complexity of your application. If the purpose of the different buttons/child inside parent element have less distinct or similar purpose, you can use conditional handling. Else if they have distinct purposes using different eventListners in each buttons/child will be more helpful.

[@gaurangshroff]

Very well explained

[@deeecode]

So nice to hear

[@Vc00018]

very helpfull !!

[@deeecode]

Glad it was helpful!

[@adibahbab6859]

Thanks man.....

[@cescr3821]

awesome dude ty.

[@deeecode]

You're greatly welcome!

[@thefootballcore]

hey, do you play football , if yes, Chelsea is ready to sign you mate , you match perfectly with their needs

[@PaulJBurgess]

Subbed!