Event delegation is a technique where you attach a single event listener to a parent element to handle events on its child elements, instead of adding listeners to each child individually.
It leverages event bubbling, where events propagate from the target element up through its ancestors.
Why Event Delegation is Useful
- Reduces memory usage by adding fewer event listeners
- Works for dynamically added elements
- Makes code easier to manage in large DOM trees
Example: Without Event Delegation
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const items = document.querySelectorAll("#list li");
items.forEach(item => {
item.addEventListener("click", () => {
alert(item.textContent);
});
});
</script>
- Each
<li>has its own listener → not efficient for large lists
Example: With Event Delegation
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById("list");
list.addEventListener("click", (event) => {
if (event.target.tagName === "LI") {
alert(event.target.textContent);
}
});
</script>
- Single listener on
<ul> - Checks
event.targetto handle clicks on<li> - Works even if new
<li>elements are added dynamically
⚡ In short:
Event delegation uses bubbling to handle events at a parent level, making it more efficient and flexible, especially for dynamic content or large lists.
