Event Delegation in JavaScript, Simplified

Рет қаралды 11,065

Жыл бұрын

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.com/
- Twitter: / iamdillion
- Instagram: / deeecode
- LinkedIn: / dillionmegida
- GitHub: github.com/dillionmegida
_____
#deeecode

Пікірлер: 62

@tommuc8538 Жыл бұрын

Wow, that was super clear and simply. Thx.

@deeecode Жыл бұрын

Glad you liked it! You're welcome

@riyatiwari7178 Жыл бұрын

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

@deeecode Жыл бұрын

Thank you! Will do!

@victortarroni 11 ай бұрын

Super clear! Thanks Mate!

@deeecode 11 ай бұрын

So glad to hear. you're welcome!

@timeless268 6 ай бұрын

The explanation is AWESOME ! Thank you so much❤

@deeecode 6 ай бұрын

So so glad it was helpful!

@PaulJBurgess 4 ай бұрын

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

@mlindatech 10 ай бұрын

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

@deeecode 10 ай бұрын

Thanks for the feedback 🙌🏾

@FranklinAirlonger-jm3pj 11 ай бұрын

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

@deeecode 11 ай бұрын

I appreciate that! Glad you like them

@BriariusTitan 9 ай бұрын

Thanks for the help, you clarified it well.

@deeecode 8 ай бұрын

You're welcome!

@HarshSingh-hk8fe 8 ай бұрын

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

@deeecode 8 ай бұрын

So glad you find it helpful 😊

@user-nm7in5cm3q 11 ай бұрын

great video - thank you!!

@deeecode 11 ай бұрын

You're very much welcome!

@adibahbab6859 10 ай бұрын

Thanks man.....

@keddycameron2723 Жыл бұрын

very clear! thank u

@deeecode Жыл бұрын

You are welcome!

@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 ?

@RishabhJain-uv7zj 6 ай бұрын

Nice explanation. Thanks

@deeecode 6 ай бұрын

Glad it was helpful!

@himxai 8 ай бұрын

Thanks love your explanation 💯

@deeecode 8 ай бұрын

Glad it was helpful!

@walkingalonewithyusuf9987 10 ай бұрын

Your teaching style is really amazing ❤❤❤

@deeecode 6 ай бұрын

Glad you enjoyed it

@Wildrespect 9 ай бұрын

Nahh… this tut right here is dope🔥

@deeecode 9 ай бұрын

I’m glad you find this so 😀

@york2301 Жыл бұрын

Keep up the good work!

@deeecode Жыл бұрын

Thank you so much!

@gaurangshroff Жыл бұрын

Very well explained

@deeecode Жыл бұрын

So nice to hear

@malikmartin 3 ай бұрын

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

@deeecode 3 ай бұрын

Glad it helped!

@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 kzfaq.info/get/bejne/hJ-meLtyvLbdnok.html 😇 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.

@PonnaiyaSwami 6 ай бұрын

maaaaaaaaaaaaaaaaan!! you're a legend.

@deeecode 6 ай бұрын

Glad you found the video helpful :)

@cescr3821 Жыл бұрын

awesome dude ty.

@deeecode Жыл бұрын

You're greatly welcome!

@hamzamellahi120 6 ай бұрын

Loooove it, keep it uP!

@deeecode 6 ай бұрын

Thank you! Will do!

@PaulJBurgess 4 ай бұрын

Subbed!

@Vc00018 Жыл бұрын

very helpfull !!

@deeecode Жыл бұрын

Glad it was helpful!

@godugunurumanoj733 8 ай бұрын

Awesome explanation i loved it.

@deeecode 8 ай бұрын

Glad it was helpful!

@godugunurumanoj733 8 ай бұрын

Yes I am confident about this concept

@thefootballcore 4 ай бұрын

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

@youtubejproasters1224 11 ай бұрын

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 10 ай бұрын

I really like your question man!

@shishirbhurtel7978 6 ай бұрын

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.