addEventListener ไม่ทำงานใน IE8

ฉันได้สร้างช่องทำเครื่องหมายแบบไดนามิก ฉันได้ใช้addEventListenerจะเรียกฟังก์ชั่นในการคลิกช่องซึ่งทำงานใน Google Chrome และ Firefox แต่ไม่ทำงานใน Internet Explorer 8 นี่คือรหัสของฉัน:

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

setCheckedValues เป็นตัวจัดการเหตุการณ์ของฉัน

ลอง:

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

อัปเดต :: สำหรับ Internet Explorer เวอร์ชันก่อน IE9 ควรใช้เมธอดattachEventเพื่อลงทะเบียนตัวฟังที่ระบุไปยังEventTarget ที่เรียกใช้สำหรับaddEventListenerอื่น ๆควรใช้

คุณต้องใช้attachEventใน IE เวอร์ชันก่อน IE9 ตรวจสอบว่าaddEventListenerมีการกำหนดและใช้attachEventหากไม่ใช่:

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

โปรดทราบว่าIE11 attachEventจะลบ

ดูสิ่งนี้ด้วย:

• MDN:: element.addEventListenerLegacy Internet Explorer และ attachEvent
• MSDN: เมธอด attachEvent

นี่เป็นวิธีแก้ปัญหา crossbrowser ง่ายๆ:

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

แทนที่จะ "คลิก" อาจเป็นเหตุการณ์ใด ๆ ก็ได้

IE ไม่รองรับaddEventListenerจนถึงเวอร์ชัน 9 ดังนั้นคุณต้องใช้attachEventนี่คือตัวอย่าง:

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

ขอให้ง่ายขึ้น (และมีประสิทธิภาพมากขึ้น) หากคุณมอบหมายการจัดการเหตุการณ์ให้กับองค์ประกอบอื่นเช่นตารางของคุณ

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

});

ด้วยวิธีนี้คุณจะมีตัวจัดการเหตุการณ์เพียงตัวเดียวและสิ่งนี้จะใช้ได้กับองค์ประกอบที่เพิ่มใหม่ด้วย ต้องใช้ jQuery> = 1.7

มิฉะนั้นให้ใช้ delegate ()

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

});

คุณสามารถใช้ฟังก์ชัน 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) {
}

ฉันเลือกใช้ Polyfill ฉบับย่อตามคำตอบข้างต้น:

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

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

แน่นอนเช่นเดียวกับคำตอบข้างต้นสิ่งนี้ไม่แน่ใจว่าwindow.attachEventมีอยู่จริงซึ่งอาจเป็นปัญหาหรือไม่ก็ได้

หากคุณใช้ jQuery คุณสามารถเขียน:

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

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