JS एडवांस्ड Events

एक ऐसे manager के बारे में सोचें जो किसी building के हर दरवाज़े पर हर visitor को खुद greet नहीं करता, इसके बजाय वे main entrance पर एक व्यक्ति को तैनात करते हैं जो हर visitor की, चाहे वे किसी भी दरवाज़े से आएं, एक ही central point को रिपोर्ट करता है। JavaScript में advanced event handling भी उसी idea का इस्तेमाल करती है, event delegation किसी parent element पर एक listener को कई children के events संभालने देता है, यहाँ तक कि बाद में जोड़े गए children के भी, हर एक पर अलग-अलग listener attach करने के बजाय। ये patterns, delegation, custom events, और default behavior को control करना, ठीक वही हैं जो cookiescursor.com जैसी असली application में ज़्यादा sophisticated interactive features को चलाते हैं।

In this page:

Event Delegation
Custom Events
preventDefault()
stopPropagation()
Event Types की एक Quick Reference

Syntax

javascript

element.addEventListener("eventName", handler, options);
element.removeEventListener("eventName", handler);

Event Delegation

Event delegation event bubbling पर निर्भर करता है, किसी parent element पर एक single listener attach करना और event object की target property का इस्तेमाल करके यह पता लगाना कि असल में किस child element ने उसे trigger किया, हर child पर अलग-अलग listener attach करने के बजाय।

Note: Event delegation बाद में page में जोड़े गए children के लिए भी अपने आप काम करता है, क्योंकि listener स्थिर parent पर रहता है, हर individual child पर नहीं।

Warning: event.target उसी exact element को refer करता है जिससे interact किया गया, जो उस element का child हो सकता है जिसे आप असल में जांचना चाहते थे, यहाँ अक्सर closest() मदद करता है।

उदाहरण: Event Delegation

javascript

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
<script>
  document.getElementById("list").addEventListener("click", (event) => {
    // Print `"Clicked:", event.target.textContent` to the console
    console.log("Clicked:", event.target.textContent);
  });
</script>

Custom Events

CustomEvent constructor आपको अपने खुद के named events बनाने और dispatch करने देता है, custom data के साथ, जो application के अलग-अलग हिस्सों को browsers के अपने native event system से ही बातचीत करने देता है।

Note: Custom events किसी application के हिस्सों को decouple करने का एक साफ तरीका हैं, एक हिस्सा बिना यह जाने कि कौन सुन रहा है, एक event dispatch कर देता है।

Warning: एक custom event को किसी खास element पर dispatch करना ज़रूरी है, और सिर्फ उसी element, या bubble होने पर उसके ancestors, पर attached listeners ही उसे पाएंगे।

उदाहरण: Custom Events

javascript

// Listen for the `greet` event on `document` and run the handler when it fires
// Listen for the `greet` event on `document` and run the handler when it fires
document.addEventListener("greet", (e) => console.log("Received:", e.detail));
// Declare the constant `event` as a new `CustomEvent` instance
// Declare the constant `event` as a new `CustomEvent` instance
const event = new CustomEvent("greet", { detail: "Hello!" });
// Call `document.dispatchEvent(event)`
// Call `document.dispatchEvent(event)`
document.dispatchEvent(event);

preventDefault()

preventDefault() किसी event के लिए browser की default built-in action को रोक देता है, जैसे किसी link के href को follow करना या form submit करके page reload करना, जिससे JavaScript इसके बजाय पूरा control ले लेता है कि क्या होता है।

Note: preventDefault() आमतौर पर form submission पर इस्तेमाल होता है जब आप एक traditional full-page form submission के बजाय JavaScript से data validate या भेजना चाहते हैं।

Warning: preventDefault() सिर्फ browser की default action को रोकता है, यह event को parent elements तक bubble होने से नहीं रोकता, उसके लिए stopPropagation चाहिए।

उदाहरण: preventDefault()

javascript

<a href="https://example.com" id="link">Click</a>
<script>
  document.getElementById("link").addEventListener("click", (e) => {
    // Call `e.preventDefault()`
    e.preventDefault();
    // Print "Navigation stopped" to the console
    console.log("Navigation stopped");
  });
</script>

stopPropagation()

stopPropagation() किसी event को handle होने के बाद parent elements तक ऊपर bubble होते रहने से रोकता है, जो तब उपयोगी है जब किसी nested element पर click को उसके किसी ancestor पर attached listener को भी trigger नहीं करना चाहिए।

Note: stopPropagation() का इस्तेमाल तभी करें जब आपको खासतौर पर parent listeners को भी react करने से रोकना हो, ज़्यादातर रोज़मर्रा की event handling में इसकी ज़रूरत नहीं।

Warning: stopPropagation() का ज़्यादा इस्तेमाल page पर कहीं और मौजूद event delegation patterns को तोड़ सकता है जो सही तरीके से काम करने के लिए उसी bubbling व्यवहार पर निर्भर थे।

उदाहरण: stopPropagation()

javascript

<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"));
  document.getElementById("inner").addEventListener("click", (e) => {
    // Call `e.stopPropagation()`
    e.stopPropagation();
    // Print "Inner only" to the console
    console.log("Inner only");
  });
</script>

Event Types की एक Quick Reference

click के अलावा, आम event types में keyboard input के लिए keydown और keyup, forms के लिए submit, real-time text field changes के लिए input, और page या element scrolling track करने के लिए scroll शामिल हैं, हर एक अलग-अलग interactive स्थितियों में उपयोगी।

Note: input event किसी text field में हर keystroke पर fire होता है, जो इसे live character counters जैसे real-time features के लिए change से बेहतर बनाता है।

Warning: scroll event scrolling के दौरान बहुत ही बार-बार fire हो सकता है, बिना ध्यान दिए इससे सीधे भारी logic जोड़ना page performance को काफी नुकसान पहुंचा सकता है।

उदाहरण: A Quick Reference of Event Types

javascript

document.addEventListener("keydown", (e) => console.log("keydown:", e.key));
document.addEventListener("scroll", () => console.log("scroll"));
// Also common: keyup, submit, input

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS DOM Methods Next Lesson → JS Spread Operator

JS एडवांस्ड Events

Event Delegation

Custom Events

preventDefault()

stopPropagation()

Event Types की एक Quick Reference

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code