If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
JS Event Bubbling
Event bubbling JavaScript का एक behavior है जहाँ एक event, जो किसी nested element पर trigger होता है, अपने parent elements तक propagate करता है : मतलब अंदर से बाहर की तरफ।
यह तब होता है जब एक child element पर event trigger होता है और और वो event bubble करते हुए उसके parent फिर उसके parent इस तरह से सबसे top element तक पहुंचता है।
●●●
Event bubbling को समझना जरूरी है क्योंकि ये event handling की performance और behavior को impact करता है। इसका use कुछ scenarios में helpful होता है , जैसे -
Event Delegation : एक ही event listener को multiple elements के लिए use करना।
Performance Optimization : Multiple elements पर individual event listeners लगाने की वजाय एक parent element पर event listener लगाना।
●●●
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent" style="padding: 20px; background-color: lightblue;">
Parent Div
<div id="child" style="padding: 20px; background-color: lightgreen;">
Child Div
</div>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
document.getElementById('parent').addEventListener('click', function() {
alert('Parent Div clicked!');
});
document.getElementById('child').addEventListener('click', function(event) {
alert('Child Div clicked!');
});
example में हमने parent और child दोनों elements पर click event handle की है। parent element पर click करने पर एक बार alert दिखेगा।
लेकिन child element पर click करने से 2 event trigger होगी पहली child element के लिए और दूसरी parent element के लिए , जिससे alert 2 बार दिखेगा।
●●●
javaScript में Event Bubbling को stop करने के लिए आपको stopPropagation() करना पड़ेगा।
अगर आप चाहते हैं कि किसी child element पर click करने , event bubble न हो और सिर्फ उसी element तक सीमित रहे तो stopPropagation() method को call कर सकते हैं, जैसे -
document.getElementById('child').addEventListener('click', function(event) {
alert('Child Div clicked!');
event.stopPropagation();
});
same example को अब एक बार stopPropagation(); method का use करके देखें। अंतर् आपको समझ आ जायगा।
●●●
Event Delegation : आप एक single event listener parent element पर attach करके , multiple child elements पर event handle कर सकते हैं , targeted element को identify करके ।
Performance : ये approach memory efficient होती है क्योंकि multiple event listeners की जगह एक ही listener use होता है।
Dynamic Elements : Dynamically added elements पर भी बिना new listeners add किये event handle किया जा सकता है।
Event Propagation : कभी-कभी unwanted events भी propagate होती हैं, जो unexpected behavior cause कर सकती हैं।
Complexity : Large DOM structures में event bubbling का tracking अउ managing complex हो सकता हैं।
●●●
Loading ...