JS Event Bubbling और Capturing
In this page:
element.addEventListener("click", handler, false); // bubbling
element.addEventListener("click", handler, true); // capturing
event.stopPropagation();Event Bubbling
Bubbling में, एक event target पर शुरू होता है और अपने ancestors के ज़रिए ऊपर की ओर बढ़ता है। यह DOM में default event flow है और यही वजह है कि कई containers के अंदर गहराई से nested किसी बटन पर click उन बाहरी containers पर लगे listeners को भी trigger कर सकता है।
उदाहरण: Event Bubbling
<div id="outer">
<button id="inner">Click</button>
</div>
<script>
// Listen for the `click` event on `document.getElementById("outer")` and run the handler when it fires
document.getElementById("outer").addEventListener("click", () => console.log("Outer (bubbled)"));
// Listen for the `click` event on `document.getElementById("inner")` and run the handler when it fires
document.getElementById("inner").addEventListener("click", () => console.log("Inner (target)"));
</script>Event Capturing
Capturing में, event bubble होकर वापस आने से पहले बाहरी ancestor से target की ओर जाता है।
Capturing listeners कम इस्तेमाल होते हैं पर addEventListener को तीसरे argument के रूप में true (या {capture: true}) पास करके register किए जाते हैं, जो target के अपने listeners के fire होने से पहले चलते हैं।
उदाहरण: Event Capturing
<div id="outer">
<button id="inner">Click</button>
</div>
<script>
// Listen for the `click` event on `document.getElementById("outer")` and run the handler when it fires
document.getElementById("outer").addEventListener("click", () => console.log("Outer (capture)"), true);
// Listen for the `click` event on `document.getElementById("inner")` and run the handler when it fires
document.getElementById("inner").addEventListener("click", () => console.log("Inner (target)"));
</script>Propagation रोकना
stopPropagation किसी event को दूसरे ancestors तक जारी रहने से रोकता है। किसी handler के अंदर इसे कॉल करना event को किसी भी ancestor listener तक पहुंचने से रोक देता है, जो तब उपयोगी है जब किसी nested element को किसी खास interaction का पूरी तरह मालिक होना हो।
उदाहरण: Stopping Propagation
<div id="outer">
<button id="inner">Click</button>
</div>
<script>
// Listen for the `click` event on `document.getElementById("outer")` and run the handler when it fires
document.getElementById("outer").addEventListener("click", () => console.log("Never runs"));
document.getElementById("inner").addEventListener("click", (e) => {
// Call `e.stopPropagation()`
e.stopPropagation();
// Print "Inner only" to the console
console.log("Inner only");
});
</script>stopImmediatePropagation
stopImmediatePropagation current event को रोक देता है और उसी target पर मौजूद दूसरे listeners को चलने से रोकता है।
यह stopPropagation से ज़्यादा targeted stop है — यह उसी exact element पर उसी event के लिए register किए गए किसी भी दूसरे listener को भी block करता है।
उदाहरण: stopImmediatePropagation
<button id="btn">Click</button>
<script>
// Declare the constant `btn`, set to `document.getElementById("btn")`
const btn = document.getElementById("btn");
btn.addEventListener("click", (e) => {
// Call `e.stopImmediatePropagation()`
e.stopImmediatePropagation();
// Print "First listener" to the console
console.log("First listener");
});
// Listen for the `click` event on `btn` and run the handler when it fires
btn.addEventListener("click", () => console.log("Never runs"));
</script>Bubbling और Capturing साथ में
दोनों phases को जानना आपको यह control करने में मदद करता है कि event listeners किस क्रम में चलते हैं। साथ में, capturing और bubbling वह पूरी three-phase यात्रा (capture down, target, bubble up) define करते हैं जिससे हर DOM event गुज़रता है।
उदाहरण: Bubbling and Capturing Together
<div id="outer">
<button id="inner">Click</button>
</div>
<script>
// Listen for the `click` event on `document.getElementById("outer")` and run the handler when it fires
document.getElementById("outer").addEventListener("click", () => console.log("2: capture"), true);
// Listen for the `click` event on `document.getElementById("inner")` and run the handler when it fires
document.getElementById("inner").addEventListener("click", () => console.log("1: target"));
// Listen for the `click` event on `document.getElementById("outer")` and run the handler when it fires
document.getElementById("outer").addEventListener("click", () => console.log("3: bubble"));
</script>stopPropagation()कॉल करना और analytics जैसे ऊपर सुनने वाले दूसरे code को तोड़ देना।- यह भूल जाना कि listeners डिफ़ॉल्ट रूप से bubbling phase में चलते हैं; capturing के लिए
trueया{ capture: true }pass करें। event.target(जहाँ से शुरू हुआ) कोevent.currentTarget(जहाँ listener है) से confuse करना।
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: