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>

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.

50 JavaScript Interview QuestionsAnd their answers explainedHere are 50 JavaScript interview questions that often come up during a technical interview. In one place, one resource to learn from.Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Learn more about event delegation