IE8 में addEventListener काम नहीं कर रहा है

Question

मैंने गतिशील रूप से एक चेकबॉक्स बनाया है। मैंने addEventListenerचेकबॉक्स पर क्लिक करने के लिए एक फ़ंक्शन का उपयोग किया है, जो Google क्रोम और फ़ायरफ़ॉक्स में काम करता है लेकिन इंटरनेट एक्सप्लोरर 8 में काम नहीं करता है । यह मेरा कोड है:

var _checkbox = document.createElement("input");
_checkbox.addEventListener("click", setCheckedValues, false);

setCheckedValues मेरा इवेंट हैंडलर है।

Answer 1

प्रयत्न:

if (_checkbox.addEventListener) {
    _checkbox.addEventListener("click", setCheckedValues, false);
}
else {
    _checkbox.attachEvent("onclick", setCheckedValues);
}

अपडेट :: इंटरनेट एक्सप्लोरर संस्करण IE9 से पहले के लिए, attachEvent विधि करने के लिए निर्दिष्ट श्रोता रजिस्टर करने के लिए इस्तेमाल किया जाना चाहिए EventTarget इस पर कहा जाता है, दूसरों के लिए addEventListener प्रयोग किया जाना चाहिए।

Comments

यह क्यों इस्तेमाल किया जाना चाहिए के रूप में एक विवरण जवाब में सुधार होगा।

— dkris

@dkris ने एक स्पष्टीकरण के रूप में एक संक्षिप्त विवरण जोड़ा, मुझे आशा है कि चीजें थोड़ी स्पष्ट होती हैं .. :)

— सुधीर बस्ताकोटी

Answer 2

आपको attachEventIE9 से पहले IE संस्करणों में उपयोग करना होगा। पता लगाएँ कि क्या addEventListenerपरिभाषित है और attachEventअगर यह नहीं है तो उपयोग करें :

if(_checkbox.addEventListener)
    _checkbox.addEventListener("click",setCheckedValues,false);
else
    _checkbox.attachEvent("onclick",setCheckedValues);
//                         ^^ -- onclick, not click

ध्यान दें कि IE11 हटा देगाattachEvent ।

यह सभी देखें:

• MDN:: element.addEventListenerलिगेसी इंटरनेट एक्सप्लोरर और अटैचमेंट
• MSDN: संलग्न विधि

Answer 3

यह भी सरल क्रॉसबोवर समाधान है:

var addEvent =  window.attachEvent||window.addEventListener;
var event = window.attachEvent ? 'onclick' : 'click';
addEvent(event, function(){
    alert('Hello!')
});

'क्लिक' के बजाय पाठ्यक्रम की कोई भी घटना हो सकती है।

Comments

+1, मुझे लगता है कि यह एक स्मार्ट वर्कअराउंड है! addEventListenerतीसरा तर्क वैसे भी वैकल्पिक है, इसलिए यह एक अच्छा समाधान हो सकता है, और यह अगर-और शाखाओं की तुलना में अच्छा है। लेकिन इस मामले में, _checkboxलक्ष्य तत्व है, नहीं window। :) तो शायद आप एक समारोह बना सकते हैं जहां घटना का लक्ष्य एक और तर्क है।

— Sk8erPeter

ओह, मैं बहुत जल्दी उठ गया ... :) मुझे क्रोम में "टाइपएयर: अवैध आह्वान" मिलता है , अगर मैं इवेंट तत्वों को addEventListenerकॉल करने का प्रयास करता हूं - इस विषय को देखें: stackoverflow.com/questions/1007340/… । इसलिए windowऑब्जेक्ट के लिए, यह सही तरीके से काम करता है, लेकिन दस्तावेज़ के अंदर अन्य नोड्स के लिए काम नहीं करता है। इस तरह से आपका सुझाया गया उपनाम मूल प्रश्न में उल्लिखित मामले के लिए सही नहीं है! आपका वर्कअराउंड क्या होगा?

— Sk8erPeter

Answer 4

IE addEventListenerसंस्करण 9 तक समर्थन नहीं करता है , इसलिए आपको इसका उपयोग करना होगा attachEvent, यहां एक उदाहरण है:

if (!someElement.addEventListener) {
    _checkbox.attachEvent("onclick", setCheckedValues);
}
else {
    _checkbox.addEventListener("click", setCheckedValues, false);
}

Answer 5

Mayb यह आसान है (और अधिक प्रदर्शन किया है) यदि आप इवेंट को किसी अन्य तत्व को सौंपते हैं, उदाहरण के लिए आपकी टेबल

$('idOfYourTable').on("click", "input:checkbox", function(){

});

इस तरह से आपके पास केवल एक ईवेंट हैंडलर होगा, और यह नए जोड़े गए तत्वों के लिए भी काम करेगा। इसके लिए jQuery> = 1.7 की आवश्यकता होती है

अन्यथा प्रतिनिधि का उपयोग करें ()

$('idOfYourTable').delegate("input:checkbox", "click", function(){

});

Answer 6

आप ज्यादातर चीजों के लिए घटनाओं को जोड़ने के लिए नीचे दिए गए addEvent () फ़ंक्शन का उपयोग कर सकते हैं लेकिन ध्यान दें कि XMLHttpRequest if (el.attachEvent)IE8 में विफल हो जाएगा, क्योंकि यह समर्थन नहीं करता है XMLHttpRequest.attachEvent()इसलिए आपको XMLHttpRequest.onload = function() {}इसके बजाय उपयोग करना होगा।

function addEvent(el, e, f) {
    if (el.attachEvent) {
        return el.attachEvent('on'+e, f);
    }
    else {
        return el.addEventListener(e, f, false);
    }
}

var ajax = new XMLHttpRequest();
ajax.onload = function(e) {
}

Answer 7

मैंने उपर्युक्त उत्तरों के आधार पर एक त्वरित पॉलीफ़िल का विकल्प चुना है:

//# Polyfill
window.addEventListener = window.addEventListener || function (e, f) { window.attachEvent('on' + e, f); };

//# Standard usage
window.addEventListener("message", function(){ /*...*/ }, false);

बेशक, ऊपर दिए गए उत्तर की तरह यह सुनिश्चित नहीं होता है कि window.attachEventमौजूद है, जो एक मुद्दा हो सकता है या नहीं।

Answer 8

यदि आप jQuery का उपयोग करते हैं तो आप लिख सकते हैं:

$( _checkbox ).click( function( e ){ /*process event here*/ } )

Answer 9

if (document.addEventListener) {
    document.addEventListener("click", attachEvent, false);
}
else {
    document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
    var target = ev.target || ev.srcElement;
    // custom code
}