Efficient Event Handling
In this page:
$(parent).on("eventName", "childSelector", function () {
// delegated handler
});Event Delegation क्या है?
Event delegation एक single listener को एक stable parent element पर attach करता है और इसे matching descendants से bubble होकर आने वाले events पकड़ने देता है, हर एक पर bind करने के बजाय।
उदाहरण: 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 उन elements के लिए काम करता है जो event handler originally बनने के बाद page में add किए गए हैं, जो directly handlers bind करने पर एक बड़ा advantage है।
उदाहरण: 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 बनाम Delegation
Direct binding हर मौजूदा element पर individually एक handler attach करता है, जिसका मतलब है बाद में add किए गए किसी भी element को अपना नया handler attach करना होगा।
उदाहरण: 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>अलग-अलग Events Delegate करना
on() method इस तरह कई अलग-अलग event types delegate कर सकता है — click, mouseenter, change, और दूसरे — दूसरे argument के रूप में एक selector pass करके।
उदाहरण: 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>एक छोटा Delegation Project
Delegation lists, tables, menus, और किसी भी ऐसे interface के लिए खासतौर पर valuable है जो dynamically elements create या remove करता है, क्योंकि यह bookkeeping से बचाता है।
उदाहरण: 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>$("li").on("click", ...)को हर item पर bind करना और बाद में add किए गए items के लिए काम करने की उम्मीद रखना, जबकि$("#list").on("click", "li", ...)जैसी delegation चाहिए।- हर चीज़ के लिए
$(document)पर delegate करना, जो page पर हर click को handler से गुज़रने पर मजबूर करता है; सबसे नज़दीकी stable parent इस्तेमाल करें। - deprecated
.live()या.delegate()इस्तेमाल करना, जबकि एक selector के साथ.on()दोनों की जगह ले लेता है।
Chapter Quiz — Complete all 5 topics to unlock
0/5 topics done
Complete these topics first: