Efficient Event Handling
In this page:
What is Event Delegation?
Event delegation attaches a single listener to a stable parent element and lets it catch events bubbling up from matching descendants, rather than binding a separate listener to each individual child element. This means one handler can cover many elements — including ones that don't exist yet — instead of needing one handler per element.
Example: What is Event Delegation?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list").on("click", "li", function() {
console.log("Clicked:", $(this).text());
});
</script>
</body>
</html>Dynamic Elements
Delegation works for elements added to the page after the event handler was originally created, which is a major advantage over binding handlers directly to each element. A new list item added later is automatically covered by the parent's existing delegated handler, with nothing extra to wire up.
Example: Dynamic Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<button id="add">Add Item</button>
<script>
$("#list").on("click", "li", function() {
console.log($(this).text());
});
$("#add").on("click", function() {
$("#list").append("<li>New Item</li>");
});
</script>
</body>
</html>Direct Binding vs Delegation
Direct binding attaches a handler to each existing element individually, which means any element added afterward needs its own new handler attached manually. Delegation instead uses one handler on a stable parent, making it a much better fit for lists, tables, or menus whose contents can change over time.
Example: Direct Binding vs Delegation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list li").on("click", function() { console.log("Direct"); });
$("#list").on("click", "li", function() { console.log("Delegated"); });
</script>
</body>
</html>Delegating Different Events
The on() method can delegate many different event types this way — click, mouseenter, change, and others — by passing a selector as the second argument so the handler only reacts to events from elements matching that selector.
Example: Delegating Different Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<script>
$("#list").on("click", "li", function() { console.log("Clicked"); });
$("#list").on("mouseenter", "li", function() { console.log("Hovered"); });
</script>
</body>
</html>Small Delegation Project
Delegation is especially valuable for lists, tables, menus, and any interface that creates or removes elements dynamically, since it avoids the bookkeeping of attaching and detaching individual handlers as elements come and go.
Example: Small Delegation Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
.selected { background: yellow; }
</style>
</head>
<body>
<table id="rows"><tr><td>Row 1</td></tr></table>
<script>
$("#rows").on("click", "tr", function() {
$(this).toggleClass("selected");
});
</script>
</body>
</html>Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: