
What is Event Delegation in JavaScript?
DOM event delegation is used for responding to user events via a single parent rather than each child node. With it, you can bind an event handler to a common parent element that will handle any event happening on one of its children:
<!-- Instead of doing: -->
<ul>
<li onclick="console.log(event.type);">π</li>
<li onclick="console.log(event.type);">π</li>
<li onclick="console.log(event.type);">π</li>
</ul>
<!-- We can do: -->
<ul onclick="console.log(event.type);">
<li>π</li>
<li>π</li>
<li>π</li>
</ul>
Copied to clipboard!
This has a couple of advantage over of using event listeners on individual elements:
- You can respond to user events with one listener, which creates a leaner and more readable code.
- You donβt need to rebind events if nodes are added
through JavaScript.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

Resources:
π More Webtips
Master the Art of Frontend
Unlimited access to hundred of tutorials
Access to exclusive interactive lessons
Remove ads to learn without distractions