घटना बुदबुदाती और कैप्चरिंग क्या है?

Question

इवेंट बबलिंग और कैप्चरिंग में क्या अंतर है? कैप्चरिंग बनाम बबलिंग का उपयोग कब करना चाहिए?

Comments

मैं इस उपयोगी लिंक की सिफारिश करता हूं: javascript.info/bubbling-and-capturing

— सामुदायिक Ans

Answer 1

घटना बुदबुदाहट और कैप्चरिंग HTML DOM API में ईवेंट प्रचार के दो तरीके हैं, जब कोई ईवेंट किसी अन्य तत्व के अंदर एक तत्व में होता है, और दोनों तत्वों ने उस ईवेंट के लिए एक हैंडल पंजीकृत किया है। ईवेंट प्रचार मोड यह निर्धारित करता है कि तत्व किस क्रम में ईवेंट प्राप्त करते हैं ।

बुदबुदाहट के साथ, इस घटना को सबसे पहले कैप्चर किया गया और अंतरतम तत्व द्वारा नियंत्रित किया गया और फिर बाहरी तत्वों को प्रचारित किया गया।

कैप्चरिंग के साथ, घटना को सबसे पहले बाहरी तत्व द्वारा कैप्चर किया जाता है और आंतरिक तत्वों को प्रचारित किया जाता है।

कैप्चरिंग को "ट्रिकलिंग" भी कहा जाता है, जो प्रसार क्रम को याद रखने में मदद करता है:

ट्रिकल डाउन, बबल अप

पुराने दिनों में वापस, नेटस्केप ने ईवेंट कैप्चरिंग की वकालत की, जबकि माइक्रोसॉफ्ट ने ईवेंट बुबलिंग को बढ़ावा दिया। दोनों W3C डॉक्यूमेंट ऑब्जेक्ट मॉडल इवेंट्स स्टैंडर्ड (2000) का हिस्सा हैं।

IE <9 केवल इवेंट बबलिंग का उपयोग करता है , जबकि IE9 + और सभी प्रमुख ब्राउज़र दोनों का समर्थन करते हैं। दूसरी ओर, जटिल डोम के लिए घटना बुदबुदाती का प्रदर्शन थोड़ा कम हो सकता है ।

हम addEventListener(type, listener, useCapture)ईवेंट हैंडलर्स को बबलिंग (डिफ़ॉल्ट) या कैप्चरिंग मोड के लिए रजिस्टर करने के लिए उपयोग कर सकते हैं । कैप्चरिंग मॉडल का उपयोग करने के लिए तीसरा तर्क पास करें true।

उदाहरण

<div>
    <ul>
        <li></li>
    </ul>
</div>

उपरोक्त संरचना में, मान लें कि liतत्व में एक क्लिक ईवेंट हुआ ।

कैप्चरिंग मॉडल में, ईवेंट को divपहले हैंडल किया जाएगा (ईवेंट हैंडलर को divपहले आग में क्लिक करें ), उसके ulबाद फिर टार्गेट एलिमेंट में आखिरी में li।

बुदबुदाहट मॉडल में, इसके विपरीत होगा: घटना को पहले तत्व द्वारा और liउसके बाद तत्व ulद्वारा नियंत्रित किया जाएगा div।

अधिक जानकारी के लिए देखें

• घटना आदेश QuirksMode पर
• MDN पर addEventListener
• घटनाक्रम QuirksMode पर उन्नत

नीचे दिए गए उदाहरण में, यदि आप किसी हाइलाइट किए गए तत्वों पर क्लिक करते हैं, तो आप देख सकते हैं कि ईवेंट प्रचार प्रवाह का कैप्चरिंग चरण पहले होता है, उसके बाद बबलिंग चरण।

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML += ('<p>' + msg + '</p>');
}

function capture() {
    log('capture: ' + this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: ' + this.firstChild.nodeValue.trim());
}

function clearOutput() {
    logElement.innerHTML = "";
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);

p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}

<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

JSFiddle पर एक और उदाहरण ।

Comments

useCaptureअब IE> = 9. स्रोत

— बीटगैमिट

मुझे पता है कि मुझे टिप्पणी करने में बहुत देर हो गई है लेकिन अच्छा लेख मुझे यहां मिला है catcode.com/domcontent/events/capture.html

— कोड

के triclklingरूप में ही है capturing? के बारे में Crockford वार्ता Trickling v. Bubblingइस वीडियो को बात-चीत में - youtube.com/watch?v=Fv9qT9joc0M&list=PL7664379246A246CB चारों ओर 1 hr 5 minutes।

— केविन मेरेडिथ

@KevinMeredith एक ही बात। "ट्रिकलिंग" केवल यह याद रखना आसान बनाता है कि दो मॉडल क्या करते हैं (ट्रिकल डाउन , बबल अप )।

— एक बिल्ली

विस्तृत विवरण में आदेश के संबंध में सही उत्तर, लेकिन आपको यह सोचकर छोड़ देता है कि ट्रिकल "बबल अप, ट्रिकल डाउन" के साथ दूसरा होता है। बुलबुले चरण से पहले इवेंट हमेशा कैप्चर चरण से गुजरते हैं। सही क्रम है trickle down=> onElement=>bubble up

— रनस्पायर्ड

Answer 2

विवरण:

quirksmode.org का अच्छा वर्णन है। संक्षेप में (quirksmode से कॉपी किया गया):

इवेंट कैप्चरिंग

जब आप ईवेंट कैप्चरिंग का उपयोग करते हैं

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

एलिमेंट 1 का ईवेंट हैंडलर पहले फायर करता है, एलिमेंट 2 का ईवेंट हैंडलर आखिरी बार फायर करता है।

घटना बुदबुदाई

जब आप इवेंट बबलिंग का उपयोग करते हैं

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

एलिमेंट 2 का ईवेंट हैंडलर पहले फायर करता है, एलिमेंट 1 का ईवेंट हैंडलर आखिरी बार फायर करता है।

---

क्या उपयोग करें?

यह आप पर निर्भर करता है की आप क्या करना चाहते हो। कोई बेहतर नहीं है। अंतर घटना संचालकों के निष्पादन का क्रम है। अधिकांश समय बुदबुदाती अवस्था में ईवेंट हैंडलर्स को फायर करना ठीक रहेगा लेकिन पहले उन्हें फायर करना भी आवश्यक हो सकता है।

Comments

क्या दोनों नहीं होते हैं, पहले कैप्चरिंग और फिर बुदबुदाहट, यह भी प्रेषण घटना क्या है?

— सूरज जैन

एक चित्रमय उदाहरण यहाँ है: javascript.info/bubbling-and-capturing

— सामुदायिक उत्तर

Answer 3

यदि दो तत्व तत्व 1 और तत्व 2 हैं। तत्व 2 तत्व 1 के अंदर है और हम एक घटना हैंडलर को दोनों तत्वों के साथ संलग्न करते हैं जो ऑनक्लिक को कहते हैं। अब जब हम तत्व 2 पर क्लिक करते हैं तो दोनों तत्वों के लिए इवेंटहैंडलर निष्पादित किया जाएगा। अब यहां यह प्रश्न है कि किस क्रम में घटना को अंजाम दिया जाएगा। यदि तत्व 1 के साथ जुड़ी हुई घटना पहले निष्पादित होती है, तो इसे इवेंट कैप्चरिंग कहा जाता है और यदि तत्व 2 से जुड़ी घटना पहले निष्पादित होती है, तो इसे इवेंट बबलिंग कहा जाता है। W3C के अनुसार ईवेंट कैप्चरिंग चरण में शुरू होगा जब तक कि यह लक्ष्य तक वापस नहीं पहुंच जाता है तब तक यह तत्व वापस आ जाता है और फिर यह बुदबुदाती है

कैप्चरिंग और बबलिंग स्टेट्स addEventListener विधि के यूज़कैपचर पैरामीटर द्वारा जाने जाते हैं

eventTarget.addEventListener (प्रकार, श्रोता, [, useCapture]);

डिफ़ॉल्ट रूप से उपयोग गलत है। इसका मतलब यह बुदबुदाती अवस्था में है।

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");

div1.addEventListener("click", function (event) {
  alert("you clicked on div 1");
}, true);

div2.addEventListener("click", function (event) {
  alert("you clicked on div 2");
}, false);

#div1{
  background-color:red;
  padding: 24px;
}

#div2{
  background-color:green;
}

<div id="div1">
  div 1
  <div id="div2">
    div 2
  </div>
</div>

कृपया सही और गलत को बदलने का प्रयास करें।

Comments

@ मास्टरएक्सिलो: फिदेल की जरूरत नहीं, स्टैकऑवरफ्लो अब इनलाइन कोड (स्टैक स्निपेट्स) का समर्थन करता है ।

— डेन डैस्कलेस्कु

के संबंध में the event will start in the capturing phase untill it reaches the target comes back to the element and then it starts bubbling। मैंने केवल addEventListener का पैरामीटर पाया है useCaptureजिसे सही या गलत पर सेट किया जा सकता है; और HTML 4.0 में, इवेंट श्रोताओं को एक तत्व की विशेषताओं के रूप में निर्दिष्ट किया गया था और useCapture defaults to false। क्या आप उस युक्ति से लिंक कर सकते हैं जो पुष्टि करती है कि आपने क्या लिखा है?

— एमएम

Answer 4

मैंने इस विषय को समझाने में javascript.info पर इस ट्यूटोरियल को बहुत स्पष्ट पाया है । और अंत में इसके 3-बिंदु सारांश वास्तव में महत्वपूर्ण बिंदुओं पर बात कर रहे हैं। मैं इसे यहाँ उद्धृत करता हूँ:

1. घटनाओं को पहले गहन लक्ष्य तक ले जाया जाता है, फिर बबल अप किया जाता है। IE <9 में वे केवल बबल करते हैं।
2. सभी हैंडलर बुबलिंग स्टेज पर काम करते हैं , जो addEventListenerअंतिम तर्क के साथ trueहोता है, जो इवेंट को कैप्चरिंग स्टेज पर पकड़ने का एकमात्र तरीका है।
3. Bubbling / कैप्चरिंग को event.cancelBubble=true(IE) या event.stopPropagation() अन्य ब्राउज़रों के लिए रोका जा सकता है।

Answer 5

ऐसी Event.eventPhaseसंपत्ति भी है जो आपको बता सकती है कि क्या घटना निशाने पर है या कहीं और से आती है।

ध्यान दें कि ब्राउज़र संगतता अभी तक निर्धारित नहीं है। मैंने इसे क्रोम (66.0.3359.181) और फ़ायरफ़ॉक्स (59.0.3) पर परीक्षण किया और यह वहां समर्थित है।

स्वीकृत उत्तर से पहले से ही महान स्निपेट पर विस्तार , यह eventPhaseसंपत्ति का उपयोग करके आउटपुट है

var logElement = document.getElementById('log');

function log(msg) {
  if (logElement.innerHTML == "<p>No logs</p>")
    logElement.innerHTML = "";
  logElement.innerHTML += ('<p>' + msg + '</p>');
}

function humanizeEvent(eventPhase){
  switch(eventPhase){
    case 1: //Event.CAPTURING_PHASE
      return "Event is being propagated through the target's ancestor objects";
    case 2: //Event.AT_TARGET
      return "The event has arrived at the event's target";
    case 3: //Event.BUBBLING_PHASE
      return "The event is propagating back up through the target's ancestors in reverse order";
  }
}
function capture(e) {
  log('capture: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

function bubble(e) {
  log('bubble: ' + this.firstChild.nodeValue.trim() + "; " + 
  humanizeEvent(e.eventPhase));
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
  divs[i].addEventListener('click', capture, true);
  divs[i].addEventListener('click', bubble, false);
}

p {
  line-height: 0;
}

div {
  display:inline-block;
  padding: 5px;

  background: #fff;
  border: 1px solid #aaa;
  cursor: pointer;
}

div:hover {
  border: 1px solid #faa;
  background: #fdd;
}

<div>1
  <div>2
    <div>3
      <div>4
        <div>5</div>
      </div>
    </div>
  </div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>

Answer 6

बुदबुदाती

  Event propagate to the upto root element is **BUBBLING**.

वश में कर लेना

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.