addEventListener

Question

के साथ बबलिंग और कैप्चरिंग मैंने हाल ही में जावास्क्रिप्ट का उपयोग करके, बमलिंग और डीओएम कार्यक्रमों पर कैप्चरिंग के बीच अंतर खोजा। अब मैं समझता हूं कि यह कैसे काम करना है, लेकिन मुझे एक अजीब स्थिति मिली है और मैं जानना चाहता हूं कि ऐसा क्यों हो रहा है।

Quirks mode के अनुसार, बाहरी प्रसार पर कैप्चरिंग के साथ घटना प्रसार शुरू होता है, नीचे तक पहुंच जाता है और फिर ऊपर तक बुलबुले होते हैं। समस्या तब थी जब मैंने कुछ परीक्षण करना शुरू कर दिया था।

यह पहली एक पर, सब कुछ उम्मीद के रूप में काम करता है:

<div id="out"> 
    <div id="in"> 
     Click This!! 
    </div> 
</div> 
<script type="text/javascript"> 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('capture out'); 
    }, true); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('capture in'); 
    }, true); 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('bubble out'); 
    }, false); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('bubble in'); 
    }, false); 
</script> 

आप पाठ क्लिक करते हैं, अलर्ट 'में कब्जा' 'बाहर कब्जा' जाने, 'में बुलबुला' और 'बुलबुला बाहर'। 'में बुलबुला'

<div id="out"> 
    <div id="in"> 
     Click This!! 
    </div> 
</div> 
<script type="text/javascript"> 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('bubble out'); 
    }, false); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('bubble in'); 
    }, false); 
    document.getElementById('out').addEventListener('click', function(){ 
     alert('capture out'); 
    }, true); 
    document.getElementById('in').addEventListener('click', function(){ 
     alert('capture in'); 
    }, true); 
</script> 

इस मामले अलर्ट जाना में 'बाहर कब्जा', 'में कब्जा' और 'बुलबुला बाहर': समस्या निम्नलिखित कोड का उपयोग कर रहा है। यदि आप ध्यान देते हैं, तो केवल अंतर यह है कि दूसरे पर बुलबुला पहले सौंपा गया है, लेकिन मुझे नहीं लगता कि इससे कोई फर्क पड़ता है।

मैंने फ़ायरफ़ॉक्स और क्रोम के साथ यह कोशिश की है, और परिणाम समान हैं (मैं समझता हूं कि इंटरनेट एक्सप्लोरर कैप्चरिंग को संभाल नहीं करता है)।

Answer 1

quirksmode मॉडल को थोड़ा सा सरल बना दिया। वास्तव में घटनाक्रम up to three phases: capturing, at target, and bubbling के माध्यम से जाते हैं।

आप event.eventPhase इस तरह लॉग इन करते हैं:

document.getElementById('out').addEventListener('click', function(e){ 
    console.log(e.eventPhase + " : " + e.target.id + " : bubbling"); 
}, false); 

... आपको लगता है कि श्रोताओं के में कब्जा 'में बुलबुला' और AT_TARGET चरण के दौरान आग देखेंगे। उसी चरण के दौरान उसी तत्व के लिए आने वाले ईवेंट श्रोताओं को पंजीकरण आदेश में शामिल किया जाता है।