JavaScript में इवेंट कैप्चरिंग क्या है?

इवेंट कैप्चरिंग (Event Capturing)

इवेंट कैप्चरिंग वह प्रक्रिया है जहां इवेंट शीर्ष एलिमेंट से शुरू होकर टारगेट एलिमेंट तक जाता है। यह इवेंट बबलिंग के विपरीत है, जो टारगेट एलिमेंट से शुरू होकर शीर्ष एलिमेंट तक जाता है।

कोड विस्तार

निम्न कोड में, बॉडी सेक्शन में तीन div एलिमेंट्स लिए गए हैं और उन्हें नेस्टेड बनाने के लिए स्टाइल लागू किया गया है।

• addEventListener() का उपयोग करके प्रत्येक div टैग पर इवेंट हैंडलर जोड़ें।
• सुनिश्चित करें कि यहां इवेंट "click" इवेंट है।
• addEventListener() मेथड 3 पैरामीटर्स स्वीकार करता है:
  • a) वह इवेंट जिसे एक्सेस करना है, यहां क्लिक इवेंट।
  • b) अलर्ट संदेश प्रदर्शित करने के लिए एक इवेंट हैंडलर फंक्शन।
  • c) तीसरा पैरामीटर फेज कहलाता है। यदि हम true रखते हैं तो इवेंट कैप्चरिंग सक्षम होगी। यदि false रखते हैं तो इवेंट बबलिंग सक्षम होगी।
• इवेंट हैंडलर फंक्शन, जो अलर्ट बॉक्स प्रदर्शित करता है, क्लिक किए गए div एलिमेंट का आईडी मान प्राप्त करने के लिए getAttribute() का उपयोग करता है।
• जब हम सबसे भीतरी नेस्टेड टैग div3 पर क्लिक करते हैं, चूंकि इवेंट कैप्चरिंग सक्षम है, अलर्ट संदेश शीर्ष div1 टैग से टारगेट टैग div3 तक शुरू होते हैं।
• जब हम div2 टैग पर क्लिक करते हैं, तो अलर्ट बॉक्स शीर्ष div1 टैग से टारगेट टैग div2 तक प्रदर्शित होंगे।

उदाहरण

<html>
<head>
<style>
  .divstyle {
    display: table-cell;
    border: 2px solid black;
    padding: 20px;
    text-align: center;
  }
</style>
</head>
<body>
  <div id="div1" class="divstyle">
    div1
    <div id="div2" class="divstyle">
      div2
      <div id="div3" class="divstyle">div3</div>
    </div>
  </div>
  <script>
    var divs = document.getElementsByTagName("div");
    for(var i = 0; i < divs.length; i++) {
      divs[i].addEventListener("click", clickHandler, true); // true = कैप्चरिंग
    }
    function clickHandler() {
      alert(this.getAttribute("id") + " इवेंट संभाला गया");
    }
  </script>
</body>
</html>

आउटपुट क्रम (div3 पर क्लिक करने पर)

1. div1 इवेंट संभाला गया
2. div2 इवेंट संभाला गया
3. div3 इवेंट संभाला गया

इवेंट फ्लो सारांश

कैप्चरिंग फेज: window → document → html → body → div1 → div2 → div3 (टारगेट)
टारगेट फेज:    div3 पर हैंडलर्स चलते हैं
बबलिंग फेज:   div3 → div2 → div1 → body → html → document → window

नोट

डिफ़ॉल्ट रूप से addEventListener का तीसरा पैरामीटर false होता है (बबलिंग फेज)। true पास करके कैप्चरिंग फेज सक्षम करें।