DEV Community

Cover image for Mastering JavaScript Event Delegation

Mastering JavaScript Event Delegation

Shafayet Hossain on November 23, 2024

In modern JavaScript development, event handling plays a crucial role in making web applications interactive and dynamic. As applications grow, so ...
Collapse
 
shafayeat profile image
Shafayet Hossain

CS on industry๐Ÿ™ƒ๐Ÿ™ƒ๐Ÿ™ƒ

Image description

Collapse
 
mahmoudalaskalany profile image
Mahmoud Alaskalany

Thank you for the great series here keep it going ๐Ÿ‘

Collapse
 
shafayeat profile image
Shafayet Hossain

I'm so glad to hear that you found it helpful ๐Ÿ˜Š๐Ÿ˜Š

Collapse
 
tharusha_rathnayaka_4bd79 profile image
Mary Wiiliams
Collapse
 
syedmuhammadaliraza profile image
Syed Muhammad Ali Raza

๐Ÿ‘

Collapse
 
shafayeat profile image
Shafayet Hossain

Thank you Ali Raza...๐Ÿ–ค

Collapse
 
procoders profile image
ProCoders

Thank you!

Collapse
 
shafayeat profile image
Shafayet Hossain

I'm glad to know that you found it helpful๐Ÿ˜Š๐Ÿ˜Š๐Ÿ˜Š

Collapse
 
stevo82930 profile image
Stevo82930

I don't know if it is bad practice but I like to attach my event listener to the root and delegate from there.

Collapse
 
shafayeat profile image
Shafayet Hossain

Attaching to the root is convenient for dynamic elements, but watch out for performance in large DOMs. If it works for you, go for it!๐Ÿ–ค

Collapse
 
nemtrepreneur profile image
NEMT Entrepreneur

Good post!

Collapse
 
shafayeat profile image
Shafayet Hossain

Thaks for your appreciate๐Ÿ˜Š

Collapse
 
tharusha_rathnayaka_4bd79 profile image
Mary Wiiliams

You can find best coding related courses and articles
codeshubb.blogspot.com/2024/11/blo...

Collapse
 
shafayeat profile image
Shafayet Hossain

Thanks for sharing๐Ÿ˜Š

Collapse
 
anubarak profile image
Robin Schambach • Edited

Keep in mind this is bad practice for assertive technologies such as screen readers as they'll announce those containers as clickable/interactable.
That's why it's not done today. People will be confused when they receive false information. Furthermore it's harder to debug certain things. When you have your event listeners attached directly to the element you can use your dev tools more effectively

Collapse
 
shafayeat profile image
Shafayet Hossain

Calling it 'bad practice' feels overly broad. Event delegation is widely used for efficiency and doesn't inherently compromise accessibility when implemented correctly. Screen readers won't misinterpret if proper ARIA roles and semantic HTML are used. Debugging issues? Only if you're not adept with your tools. This technique deserves nuance, not dismissal.