Event Delegation in JavaScript, Simplified
HTML-код
- Опубликовано: 30 окт 2022
- 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 
Наука
Wow, that was super clear and simply. Thx.
Glad you liked it! You're welcome
Thank you so much, loved it! Keep uploading this series. ❣❣
Thank you! Will do!
Super clear! Thanks Mate!
So glad to hear. you're welcome!
The explanation is AWESOME ! Thank you so much❤
So so glad it was helpful!
Thank you! I'll be back to this channel, I'm pretty sure.
Man you are wonderfully simple English straight to the point beautiful✌️🙏
Thanks for the feedback 🙌🏾
You’re good bro, the simplicity of your classes are superb
I appreciate that! Glad you like them
Thanks for the help, you clarified it well.
You're welcome!
that's really a cleanest explaination no bullshit straight to the point thanks alot bro
So glad you find it helpful 😊
great video - thank you!!
You're very much welcome!
Thanks man.....
very clear! thank u
You are welcome!
You really simplify things.. Thanks man !!
you're super super welcome :)
@@deeecode how can I get in touch with you bro ?
Nice explanation. Thanks
Glad it was helpful!
Thanks love your explanation 💯
Glad it was helpful!
Your teaching style is really amazing ❤❤❤
Glad you enjoyed it
Nahh… this tut right here is dope🔥
I’m glad you find this so 😀
Keep up the good work!
Thank you so much!
Very well explained
So nice to hear
Thanks! This should help me write cleaner (and more optimized) code!
Glad it helped!
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.
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?
@@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.
@@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 😇
Here is the video on event target ruclips.net/video/N9vEXAWPynU/видео.html 😇
I would love your feedback on it after watching, if it's simple enough. Thank you
@@DillionMegida Fun tip, change your e.target to a variable right away you can reference so you're not writing e.target everywhere.
maaaaaaaaaaaaaaaaan!! you're a legend.
Glad you found the video helpful :)
awesome dude ty.
You're greatly welcome!
Loooove it, keep it uP!
Thank you! Will do!
Subbed!
very helpfull !!
Glad it was helpful!
Awesome explanation i loved it.
Glad it was helpful!
Yes I am confident about this concept
hey, do you play football , if yes, Chelsea is ready to sign you mate , you match perfectly with their needs
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 ?
I really like your question man!
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.