javascript - उनल - घटना बुलबुला और कैप्चरिंग क्या है?




जावास्क्रिप्ट डाउनलोड (3)

इवेंट बबलिंग और कैप्चरिंग के बीच क्या अंतर है? दोनों में से, जो उपयोग करने के लिए तेज़ और बेहतर मॉडल है?


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

बुलबुले के साथ, घटना को पहले सबसे पहले तत्व द्वारा पकड़ा और संभाला जाता है और फिर बाहरी तत्वों के लिए प्रचारित किया जाता है।

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

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

नीचे घूमना, बुलबुला ऊपर

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

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

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

उदाहरण

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

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

मॉडल को कैप्चर करने में, ईवेंट को पहले div द्वारा संभाला जाएगा ( div ईवेंट हैंडलर पहले आग लगेंगे), फिर ul , फिर लक्ष्य तत्व में अंतिम पर, li

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

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

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

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());
}

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>
<section id="log"></section>

जेएसएफडल में एक और उदाहरण


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

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

विवरण:

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

घटना कैप्चरिंग

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

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

element1 का इवेंट हैंडलर पहले आग लगाता है, तत्व 2 की घटना हैंडलर आखिरी आग लगती है।

घटना बुलबुले

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

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

element2 के इवेंट हैंडलर पहले आग लगते हैं, तत्व 1 की घटना हैंडलर आखिरी आग लगती है।

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

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





javascript-events