ट्विटर बूटस्ट्रैप। मॉड्यूल इवेंट JQuery में क्यों काम करते हैं लेकिन शुद्ध जेएस में नहीं?

Question

ट्विटर बूटस्ट्रैप मोडल संवाद में घटनाओं का एक सेट है जिसका उपयोग कॉलबैक के साथ किया जा सकता है। जब मैं इस विधि अनुलेखन घटना 'hidden.bs.modal' जे एस के लिए काम नहीं करता है,

$(modalID).on('hidden.bs.modal', function (e) { 

     console.log("hidden.bs.modal"); 
    }); 

हालांकि:

यहाँ jQuery में एक उदाहरण है। का उपयोग करते हुए 'क्लिक' है काम:

document.querySelector(modalID).addEventListener('hidden.bs.modal', function(e) { 

     console.log("hidden.bs.modal"); 
    }, false); 

केवल jQuery के साथ useable इन बूटस्ट्रैप घटनाओं हैं? क्यूं कर? क्योंकि ट्विटर बूटस्ट्रैप that.$element.trigger('hidden.bs.modal') (line 997) का उपयोग करता है यह घटनाओं है को गति प्रदान करने

धन्यवाद,
डौग

Answer 1

इस के पीछे तर्क है। दूसरे शब्दों में यह .trigger का उपयोग करता है।

अब jQuery प्रत्येक तत्व के ईवेंट हैंडलर्स (सभी .on या .bind या .click आदि) ._data का उपयोग कर का ट्रैक रखता है। ऐसा इसलिए है क्योंकि there isn't any other way to get the event handlers जो बाध्य हैं (.addEventListener का उपयोग करके) एक तत्व में। तो ट्रिगर विधि वास्तव में केवल ._data(element, 'events') & ._data(element, 'handle') से सरणी के रूप में सेट ईवेंट श्रोता (हैं)/हैंडलर प्राप्त करती है और उनमें से प्रत्येक को चलाती है।

handle = (jQuery._data(cur, "events") || {})[ event.type ] && jQuery._data(cur, "handle"); 
if (handle) { 
    handle.apply(cur, data); 
} 

(line 4548)

इसका मतलब है कि कोई बात नहीं क्या संदर्भ है, अगर एक घटना .addEventListener के माध्यम से ही है यह नहीं .trigger का उपयोग करके चलेंगे। यहां एक उदाहरण दिया गया है। लोड पर केवल jquery लॉग इन होगा (.trigger द्वारा ट्रिगर किया गया)। यदि आप a तत्व पर क्लिक करते हैं, तो दोनों भाग लेंगे।

$('a')[0].addEventListener('click', function(){console.log('addlistener');}, false); 

$('a').on('click', function(){ 
    console.log('jquery'); 
}); 

$('a').trigger('click'); 

DEMO

वैकल्पिक रूप से, आप can trigger an eventfireEvent (यानी) & dispatchEvent (गैर यानी) का उपयोग जावास्क्रिप्ट में एक तत्व पर। मुझे जरूरी नहीं है कि jQuery के .trigger के तर्क को समझने या समझने की आवश्यकता न हो, लेकिन वे एक हो सकते हैं या नहीं। a little more research के बाद मुझे पता चला है कि वे ऐसा नहीं करते हैं क्योंकि कुछ पुराने ब्राउज़र केवल प्रति ईवेंट 1 ईवेंट हैंडलर का समर्थन करते हैं।

आम तौर पर हमने कार्यक्षमता को लागू करने की कोशिश नहीं की है जो केवल कुछ ब्राउज़रों (और कुछ घटनाओं) पर काम करता है लेकिन सभी नहीं, क्योंकि कोई तुरंत एक बग फाइल करेगा जो सही काम नहीं करता है।

हालांकि मैं इसकी अनुशंसा नहीं करता हूं, आप बूटस्ट्रैप्स कोड में कम से कम बदलावों के साथ इसे प्राप्त कर सकते हैं। आपको बस यह सुनिश्चित करना होगा कि नीचे दिया गया कार्य पहले से जुड़ा हुआ है (या आप श्रोताओं को दो बार फायरिंग करेंगे)।

$(modalID).on('hidden.bs.modal', function (e, triggered) { 
    var event; // The custom event that will be created 

    if(!triggered){ 
     return false; 
    } 

    e.preventDefault(); 
    e.stopImmediatePropagation(); 

    if (document.createEvent) { 
     event = document.createEvent("HTMLEvents"); 
     event.initEvent("hidden.bs.modal", true, true); 
    } else { 
     event = document.createEventObject(); 
     event.eventType = "hidden.bs.modal"; 
    } 

    event.eventName = "hidden.bs.modal"; 

    if (document.createEvent) { 
     this.dispatchEvent(event); 
    } else { 
     this.fireEvent("on" + event.eventType, event); 
    } 
}); 

अंत में करने के लिए ऊपर से ट्विटर बूटस्ट्रैप लाइन बदलने के लिए:

that.$element.trigger('hidden.bs.modal', true) 

यह इसलिए है आप जानते हैं कि अपने से किया जा रहा शुरू हो रहा है और घटना नहीं है कि आप अपने आप को करने के बाद फायरिंग कर रहे हैं। कृपया ध्यान रखें कि मैंने इस कोड को मोडल के साथ नहीं किया है। हालांकि यह नीचे click डेमो पर ठीक काम करता है, यह मोडल के साथ अपेक्षित काम कर सकता है या नहीं।

DEMO