Event Propagation और Bubbling
In this page:
$(selector).on("eventName", function (event) {
event.stopPropagation();
});Bubbling
किसी child element पर fire किया गया एक event उसके ancestor elements के through ऊपर की तरफ़ travel करता है जब तक कोई इसे रोके नहीं -- इस ऊपर की तरफ़ travel को bubbling कहा जाता है।
उदाहरण: Bubbling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="outer"><button id="inner">Click</button></div>
<script>
$("#outer").on("click", function() { console.log("Outer handler ran"); });
$("#inner").on("click", function() { console.log("Inner handler ran"); });
</script>
</body>
</html>Stop Propagation
किसी handler के अंदर event.stopPropagation() call करना event को ऊपर की तरफ़ जारी रहने से रोकता है, इसलिए parent elements पर उसी event के लिए attach किए गए किसी भी handler कभी नहीं चलते।
उदाहरण: Stop Propagation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="outer"><button id="inner">Click</button></div>
<script>
$("#outer").on("click", function() { console.log("Outer handler ran"); });
$("#inner").on("click", function(event) {
event.stopPropagation();
console.log("Inner handler ran, stopped bubbling");
});
</script>
</body>
</html>Parent और Child
Bubbling की वजह से, किसी child element का अपना handler और उसके ancestors पर कोई भी handler दोनों उसी single click को respond कर सकते हैं, सबसे अंदरूनी element से बाहर की तरफ़ order में चलते हुए।
उदाहरण: Parent and Child
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card"><button id="btn">Click</button></div>
<script>
$("#btn").on("click", function() { console.log("1: button handler"); });
$("#card").on("click", function() { console.log("2: card handler"); });
</script>
</body>
</html>Bubbling रोकना
stopPropagation() वह tool है जो specifically तब इस्तेमाल करना चाहिए जब किसी child element का अपना action -- जैसे किसी clickable card के अंदर एक button -- card के अपने click handler को भी trigger नहीं करना चाहिए।
उदाहरण: Prevent Bubbling
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="card">Card <button id="btn">Delete</button></div>
<script>
$("#card").on("click", function() { console.log("Card clicked"); });
$("#btn").on("click", function(event) {
event.stopPropagation();
console.log("Button deleted, card click suppressed");
});
</script>
</body>
</html>Delegated Events
Event delegation जानबूझकर bubbling से लड़ने के बजाय उस पर निर्भर करता है: हर child पर एक handler attach करने के बजाय, आप एक shared parent पर एक handler attach करते हैं और यह पता लगाने के लिए bubbled event के target का इस्तेमाल करते हैं कि असल में किस child के साथ interact किया गया।
उदाहरण: Delegated 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(event) {
console.log("Clicked:", event.target.textContent);
});
</script>
</body>
</html>- यह देखकर हैरान होना कि inner button click करने पर outer
#outerhandler भी चलता है, क्योंकि events default रूप से हर ancestor तक bubble होते हैं। event.stopPropagation()call करना और यह मान लेना कि यह default action भी cancel कर देता है, जैसे किसी link का navigate करना, जबकि उसके लिएevent.preventDefault()चाहिए।- किसी stray handler को fix करने के लिए
stopPropagation()इस्तेमाल करना, जो delegated handlers और ऊपर के दूसरे code को भी block कर देता है जिन्हें legitimately उस event की ज़रूरत है।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: