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>
event-delegation.html
Copied to clipboard!

This has a couple of advantage over of using event listeners on individual elements:

What is Event Delegation in JavaScript?
If you would like to see more Webtips, follow @flowforfrank

50 JavaScript Interview Questions

Resources:

Remove ads
Remove ads

πŸ“š Get access to exclusive content

Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β˜•

Get access Support us
Remove ads Read more on
Remove ads
Remove ads
πŸŽ‰ Thank you for subscribing to our newsletter. x This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.