addEventListener tidak berfungsi di IE8

Saya telah membuat kotak centang secara dinamis. Saya telah menggunakan addEventListeneruntuk memanggil fungsi dengan mengklik kotak centang, yang berfungsi di Google Chrome dan Firefox tetapi tidak berfungsi di Internet Explorer 8 . Ini kode saya:

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

setCheckedValues adalah event handler saya.

Mencoba:

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

Pembaruan :: Untuk versi Internet Explorer sebelum IE9, metode attachEvent harus digunakan untuk mendaftarkan pendengar yang ditentukan ke EventTarget tempat dia dipanggil, untuk yang lain addEventListener harus digunakan.

Anda harus menggunakan attachEventversi IE sebelum IE9. Deteksi apakah addEventListenersudah ditentukan dan gunakan attachEventjika tidak:

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

Perhatikan bahwa IE11 akan dihapusattachEvent .

Lihat juga:

• MDN:: element.addEventListenerInternet Explorer dan AttachEvent Lama
• MSDN: metode attachEvent

Ini juga solusi crossbrowser sederhana:

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

Daripada 'klik' bisa jadi kejadian apa saja tentunya.

IE tidak mendukung addEventListenerhingga versi 9, jadi Anda harus menggunakan attachEvent, berikut contohnya:

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

Mungkin lebih mudah (dan memiliki kinerja lebih) jika Anda mendelegasikan penanganan acara ke elemen lain, misalnya tabel Anda

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

});

dengan cara ini Anda hanya akan memiliki satu pengendali kejadian, dan ini juga akan berfungsi untuk elemen yang baru ditambahkan. Ini membutuhkan jQuery> = 1.7

Jika tidak, gunakan delegate ()

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

});

Anda dapat menggunakan fungsi addEvent () di bawah ini untuk menambahkan acara untuk sebagian besar hal tetapi perhatikan bahwa XMLHttpRequest if (el.attachEvent)akan gagal di IE8, karena tidak mendukung XMLHttpRequest.attachEvent()sehingga Anda harus menggunakannya 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) {
}

Saya telah memilih Polyfill cepat berdasarkan jawaban di atas:

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

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

Tentu saja, seperti jawaban di atas, ini tidak memastikan bahwa window.attachEventada, yang mungkin menjadi masalah atau tidak.

Jika Anda menggunakan jQuery, Anda dapat menulis:

$( _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
}