jQuery

2014-07-05 4 views
16

का उपयोग कर कैप्चरिंग और बबलिंग मैं jQuery में नया हूं और मैं कैप्चरिंग और बबलिंग की अवधारणा को समझने की कोशिश कर रहा हूं।jQuery

मैंने बहुत से लेख पढ़े हैं, लेकिन उनमें से अधिकांश ने जावास्क्रिप्ट के लिए ईवेंट प्रचार का वर्णन किया है।

चलें मान हम निम्न HTML कोड है:

<div id="outter"> 

     outter 

     <div id="inner"> 

       inner 
     </div> 

</div> 

कैप्चर चरण जहाँ हम डोम तत्वों नीचे जाना और उत्साह से भरा हुआ है जब हम ऊपर जाना है।

जावास्क्रिप्ट में आप तय कर सकते हैं जिस तरह से (सही या गलत मानकों का प्रयोग करके) का पालन करने के:

element.addEventListener('click',doSomething,true) --> capture phase 
element.addEventListener('click',doSomething,false) --> bubble phase 

क्या समान है jQuery को निरूपित करने के लिए जो रास्ता जावास्क्रिप्ट रास्ता के अलावा अन्य पालन करने के लिए?

क्या jQuery भी एक डिफ़ॉल्ट चरण का उपयोग करता है? उदाहरण के लिए बुलबुला?

क्योंकि मैं इस परीक्षण करने के लिए निम्न कोड का प्रयोग किया:

सीएसएस

<style> 

    div { 
      border: 1px solid green; 
      width: 200px; 

     } 

</style> 

jQuery

<script> 

    $(document).ready(function(){ 

     $('div').click(function(){ 
      $(this).animate({'width':'+=10px'},{duration: 3000}) 
     }); 

    }); 

</script> 

यह कि जब मैं outter div पर क्लिक करें, केवल प्रकट होता है वह div एक बड़े div को एनिमेट करता है। जब मैं आंतरिक div पर क्लिक करता हूं तो दोनों div divs को बड़े divs पर एनिमेट करते हैं।

मुझे नहीं पता कि मैं गलत हूं, लेकिन यह परीक्षण यह दिखाता है कि डिफ़ॉल्ट ब्राउज़र प्रचार विधि बबल है।

अगर मैं गलत हूं तो कृपया मुझे सही करें।

+0

http://api.jquery.com/event.stoppropagation/ – Satpal

+0

हाँ आप डिफ़ॉल्ट घटना बुलबुले से सही हैं DOM –

+0

http://stackoverflow.com/questions/7398290/unable-to-understand के डुप्ले -usecapture-attribute-in-addeventlistener – adeneo

उत्तर

36

jQuery घटना बुलबुले का उपयोग करता है। यदि आप कैप्चरिंग मॉडल का उपयोग करने वाले इवेंट हैंडलर को जोड़ना चाहते हैं, तो आपको इसे addEventListener का उपयोग करके स्पष्ट रूप से करना होगा। Event capturing jQuery दिखाता है कि आप jQuery चयनकर्ताओं का उपयोग करके यह कैसे कर सकते हैं।

+0

धन्यवाद बाड़ार, आपका जवाब मेरे लिए चीजों को साफ़ करता है! – christostsang

+0

प्रदान किया गया लिंक गलत है। बुलबुले चरण शुरू होने के बाद भी घटना हुक। – Offenso