Event Delegation in JavaScript, Simplified

Подписаться 12 тыс.

Просмотров 13 тыс.

50% 1

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

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 66

@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

@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 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-N9vEXAWPynU.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.

@walkingalonewithyusuf9987 Год назад

Your teaching style is really amazing ❤❤❤

@deeecode 9 месяцев назад

Glad you enjoyed it

@PaulJBurgess 7 месяцев назад

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

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

@thefootballcore 7 месяцев назад

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

@codingwithvikas7484 2 месяца назад

Love from India ❤

@RishabhJain-uv7zj 9 месяцев назад

Nice explanation. Thanks

@deeecode 9 месяцев назад

Glad it was helpful!

@victortarroni Год назад

Super clear! Thanks Mate!

@deeecode Год назад

So glad to hear. you're welcome!

@fatimaiqra2169 24 дня назад

thanks a lot!

@malikmartin 6 месяцев назад

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

@deeecode 5 месяцев назад

Glad it helped!

@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 9 месяцев назад

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.