addEventListener tidak berfungsi di IE8


118

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.

Jawaban:


215

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.


1
Penjelasan mengapa ini harus digunakan akan meningkatkan jawaban.
dkris

@dkris menambahkan deskripsi singkat sebagai klarifikasi, saya harap itu membuat segalanya menjadi lebih jelas .. :)
Sudhir Bastakoti


13

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.


+1, menurut saya ini adalah solusi yang cerdas! addEventListenerArgumen ketiga adalah opsional, jadi ini bisa menjadi solusi yang baik, dan itu lebih bagus daripada cabang if-else. Tapi dalam hal ini, _checkboxadalah elemen target, bukan window. :) Jadi mungkin Anda bisa membuat fungsi di mana target acara adalah argumen lain.
Sk8erPeter

Oh, saya memberikan suara positif terlalu dini ... :) Saya mendapatkan "TypeError: Permintaan ilegal" di Chrome jika saya mencoba untuk membuat alias addEventListenerpanggilan elemen target acara - lihat topik ini: stackoverflow.com/questions/1007340/… . Jadi untuk windowobjek, ini berfungsi dengan benar, tetapi tidak berfungsi untuk node lain di dalam dokumen. Dengan cara ini, aliasing yang Anda sarankan TIDAK benar untuk kasus yang disebutkan dalam pertanyaan asli! Apa solusi Anda?
Sk8erPeter

3

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);
}

2

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(){

});

2

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) {
}

2

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.


0

Jika Anda menggunakan jQuery, Anda dapat menulis:

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

0
if (document.addEventListener) {
    document.addEventListener("click", attachEvent, false);
}
else {
    document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
    var target = ev.target || ev.srcElement;
    // custom code
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.