JavaScript Event Delegation and Event Propagation in Hindi

Table of Contents

1 Introduction
2 Event क्या होता है?
3 Event Propagation क्या है?
4 stopPropagation() क्या है?
5 Event Delegation क्या है?
6 Real World Example
7 Conclusion

Introduction

हेलो दोस्तों, आज हम इस post में JavaScript में Event Propagation और Event Delegation के बारे में जानेंगे कि वे क्या हैं? और कैसे work करता है!.
जब हम JavaScript में किसी button, div या किसी भी HTML element पर click, hover या keyboard events handle करते हैं, तब हमें Event Propagation और Event Delegation जैसे concepts समझना बहुत जरूरी होता है।

ये concepts performance improve करने, कम code लिखने और dynamic elements को handle करने में बहुत मदद करते हैं।
इस article में हम आसान Hindi भाषा में समझेंगे:

Event क्या होता है?
Event Propagation क्या है?
Bubbling और Capturing क्या हैं?
Event Delegation क्या है?
इसका use क्यों किया जाता है?
Real-world examples

Event क्या होता है?

जब user website के webpage पे कोई action करता है, जैसे कि Button पर click करना, Keyboard key दबाना, Mouse hover करना, Form submit करना, तो उसे Event कहा जाता है।
Example:

<button id="btn">Click Me</button>

<script>
document.getElementById("btn").addEventListener("click", function() {
    alert("Button Clicked");
});
</script>

ऊपर दिए गए example में देख सकते हैं, वह एक click एक event है।

Event Propagation क्या है?

जब किसी element पर event trigger होता है, जैसे कि Button पर click होना, तब वह event parent elements तक travel करता है। इसी process को Event Propagation कहते हैं।

JavaScript में event propagation के 3 phases होते हैं:

Capturing Phase
Target Phase
Bubbling Phase

Capturing Phase

इस phase में event ऊपर से नीचे की तरफ जाता है। capturing Phase को समझने के लिए पहले Structure समझते हैं!
मान लो हमारे पसे HTML है!:

<body>
  <div id="parent">
    <button id="child">Click Me</button>
  </div>
</body>

तो इसका structure कुछ ऐसा है!:

window
 └── document
      └── html
           └── body
                └── div (parent)
                     └── button (child)

अब user button click करता है तो Browser internally event को travel करता है। Capturing phase में event ऊपर से निचे travel करता है!.

Flow:

window
↓
document
↓
html
↓
body
↓
div
↓
button

यानि Browser पहले check करेगा की:
window में कोई capturing event है?
document में?
html में?
body में?
Div में?
finally button में?

Target Phase

Target Phase event propagation का second phase होता है!. ये phase तब execute होता है जब event finally उस element तक पहुंच जाता है जहाँ actual event हुआ है!. Target Phase को simple example से समझते है अगर user ने button पर click किया तो Event pehle top से निचे आएगा → Capturing
फिर actual clicked element पर पहुंचेगा → Target Phase फिर निचे से ऊपर जायेगा → Bubbling

<body>
  <div id="parent">
    <button id="child">Click Me</button>
  </div>
</body>

Bubbling Phase

Bubbling Phase event propagation का third और last phase होता है!. इस phase में event Bottom to Top travel करता है!.
यानि Event target element से start होकर parent elements की तरफ ऊपर move करता है!.
Bubbling phase को हम simple example के जरिये समजने की कोसिस करते है!.

Example:
HTML:

<div id="parent">
  <button id="child">Click Me</button>
</div>

JavaScript:

const parent = document.getElementById("parent"); 
const child = document.getElementById("child");

parent.addEventListener("click", () => {
  console.log("Parent Clicked");
});

child.addEventListener("click", () => {
  console.log("Button Clicked");
});

हमने event propagation के first capturing phase में browser के अंदर का structure कैसा बनता है, वह देखा था. तो अब event propagation के इस phase को समझेंगे. ऊपर दिए गए example में आप देख सकते हैं कि Parent Event Listener है!

parent.addEventListener("click", () => {
  console.log("Parent Clicked");
});

इसका मतलब क्या है? जब parent div पर click event आएगा, तो “Parent Clicked” print करो.
इसी तरह Child Event Listener के लिए भी है!

child.addEventListener("click", () => {
  console.log("Button Clicked");
});

इसका मतलब है. जब button पर click event आएगा तो “Button Clicked” print करो.

तो अब इस flow को पूरी तरह से समझने की कोशिश करते हैं! अब User Button पर Click करता है Suppose user ने Button पर click kiya.

<button id="child">Click Me</button>

तो जैसे ही user ने button पे click ,किया Browser event propagation start करता है!.

STEP 1: Capturing Phase

Event top से niche travel करता है!:

window
↓
document
↓
html
↓
body
↓
div#parent
↓
button#child

लेकिन हमने capturing listener नहीं लगाया. और हमें और browser को कैसे पता चलेगा कि वह capturing phase है या नहीं है. जब बी हम event लगते है किसी button या किसी भी element पे तो वह 3 parameter होते है जैसे की आप निचे example में देख सकते है!.

document.addEventListener(event, callback, true);

ऊपर के syntax में देख सकते हैं Capturing phase के लिए हमें 3 parameters true pass करना होता है Capturing phase के लिए. क्युकी upper के example में हमने true pass नहीं किया. इसलिए capturing phase में कुछ print नहीं होगा.

STEP 2: Target Phase

अब event actual clicked element button#child तक पहुँच गया. अब Browser check करेगा क्या button पर click listener है?
YES तो ये execute होगा और “Button Clicked” print करेगा.

console.log("Button Clicked");

STEP 3: Bubbling Phase Start

अब event reverse direction में move करेगा जैसे की

button
↑
div
↑
body
↑
html
↑
document
↑
window

यानि के bubbling phase में hamne देखा event Bottom to Top travel करता है!. तो अब event Parent element तक event bubble होता है और
Browser parent div पर पहुँचा div#parent अब browser check करेगा क्या parent पर click listener hai?
YES तो ये execute होगा और “Parent Clicked” print करेगा.

console.log("Parent Clicked");

stopPropagation() क्या है?

stopPropagation() एक JavaScript method है जो Event को parent elements तक जाने से रोकता है!. Simple words में कहे तो वह Event propagation को stop करता है , यानी वह Bubbling को और Capturing को भी रोक सकता है.
Example:
HTML:

<div id="parent">
  <button id="child">Click Me</button>
</div>

JavaScript:

const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("click", () => {
  console.log("Parent Clicked");
});

child.addEventListener("click", () => {
  console.log("Button Clicked");
});

हमने पहले ऊपर देखा कि child element button पे click होने पर “Button Clicked” और “Parent Clicked” दोनों print हो रहे हैं, तो अब हमें जब child element button पे click होतो हमें only “Button Clicked” print हो तो उसके लिए हमें stopPropagation() method का इस्तेमाल कर सकते हैं जो event propagation को child से parent तक event travel को रोकता है!

child.addEventListener("click", (event) => {
  event.stopPropagation();

  console.log("Button Clicked");
});

ऊपर के JavaScript के example में देख सकते हैं कि जब user child element पे click करता है, event parent element तक नहीं पहुंचेगी.

Event Delegation क्या है?

Event Delegation एक technique है जिसमें हम multiple child elements पर अलग-अलग event listener लगाने के बजाय parent element पर सिर्फ एक event listener लगाते हैं. और bubbling की help से child elements को handle करते हैं। हम simple एक problem समजते है example के जरिये.
HTML Code:

<ul id="list">
  <li>Apple</li>
  <li>Mango</li>
  <li>Banana</li>
</ul>

ऊपर दिए गए HTML elements को हम normal way में कैसे handle कर सकते हैं?
JavaScript Code:

const items = document.querySelectorAll("li");

items.forEach((item) => {
  item.addEventListener("click", () => {
    console.log(item.innerText);
  });
});

ऊपर लिखे गए JavaScript के code में क्या problem है? अगर 100 li elements हो जाएँ तो 100 event listeners बन जाएँगे.
जिअसे Memory waste होती है!
Performance slow होती है!
Dynamic elements handle नहीं होते,

तो ऐसे सब issues को solve करने के लिए हम Event Delegation technique का इस्तेमाल कर सकते हैं.
Event Delegation का use करते हुए हम parent पर एक ही listener लगायेंगे.

const list = document.getElementById("list");

list.addEventListener("click", (event) => {
  console.log(event.target.innerText);
});

अब क्या होगा कि अगर user “Apple” पर click करेगा तो Apple और Mango पर click करेगा तो Mango और
ये कैसे work कर रहा है? ये Bubbling Phase की वजह से work करता है!.

Real World Example

मान लो आपके पास एक todo app है जहाँ dynamically tasks add होते हैं। अगर हर task पर अलग listener लगाओगे तो performance खराब हो सकती है।इसलिए हम parent container पर event delegation use करते हैं।

Conclusion

JavaScript में Event Propagation और Event Delegation बहुत important concepts हैं। Event propagation event की travelling process है।
Bubbling default behavior है। Event delegation bubbling का use करके parent से child elements handle करता है।
यह performance और dynamic UI handling के लिए बहुत useful है। अगर आप modern JavaScript applications बनाना चाहते हैं, तो इन concepts को अच्छे से समझना बहुत जरूरी है।

JavaScript में Event Delegation और Event Propagation क्या है?
Post Views : 15