addEventListener IE8'de çalışmıyor


118

Dinamik olarak bir onay kutusu oluşturdum. Ben kullandım addEventListenerGoogle Chrome ve Firefox'ta çalışıyor ancak onay kutusu, tıklamasıyla bir işlevi çağırmak için Internet Explorer 8'de çalışmıyor . Bu benim kodum:

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

setCheckedValues benim olay işleyicim.

Yanıtlar:


215

Deneyin:

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

Güncelleme :: IE9'dan önceki Internet Explorer sürümleri için , belirtilen dinleyiciyi çağrıldığı EventTarget'a kaydetmek için attachEvent yöntemi kullanılmalıdır , diğerleri için addEventListener kullanılmalıdır.


1
Bunun neden kullanılması gerektiğine dair bir açıklama, cevabı iyileştirecektir.
dkris

@dkris açıklama olarak kısa bir açıklama ekledi, umarım bu işleri biraz daha netleştirir .. :)
Sudhir Bastakoti

44

attachEventIE9'dan önceki IE sürümlerinde kullanmanız gerekir . Olmadığını Algılama addEventListenertanımlanmış ve kullanımı olduğu attachEvento değilse:

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

O Not IE11 kaldıracaktırattachEvent .

Ayrıca bakınız:


13

Bu aynı zamanda basit bir tarayıcı çözümüdür:

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

Elbette 'tıklama' yerine herhangi bir olay olabilir.


+1, bence bu akıllıca bir çözüm! addEventListenerüçüncü argümanı zaten isteğe bağlıdır, bu yüzden bu iyi bir çözüm olabilir ve eğer-değilse dallarından daha hoş. Ama bu durumda, _checkboxhedef unsur değil window. :) Yani belki olay hedefinin başka bir argüman olduğu bir fonksiyon yaratabilirsiniz.
Sk8erPeter

Oh, çok erken oy verdim ... :) Eğer olay hedef elemanlarının çağrılarını değiştirmeye çalışırsam Chrome'da "TypeError: Yasadışı çağrı" alıyorum addEventListener- bu konuya bakın: stackoverflow.com/questions/1007340/… . Dolayısıyla windownesne için doğru çalışır, ancak belgedeki diğer düğümler için çalışmaz. Bu şekilde, önerilen takma adınız orijinal soruda bahsedilen durum için doğru DEĞİLDİR! Çözümünüz ne olabilir?
Sk8erPeter

3

IE, addEventListenersürüm 9'a kadar desteklemiyor , bu yüzden kullanmanız gerekiyor attachEvent, işte bir örnek:

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

2

Mayb, olay işlemeyi başka bir öğeye, örneğin masanıza devrederseniz daha kolaydır (ve daha fazla performansa sahiptir)

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

});

bu şekilde yalnızca bir olay işleyiciniz olacak ve bu yeni eklenen öğeler için de geçerli olacaktır. Bu, jQuery> = 1.7 gerektirir

Aksi takdirde delege () kullanın

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

});

2

Çoğu şey için olay eklemek için aşağıdaki addEvent () işlevini kullanabilirsiniz, ancak XMLHttpRequest için if (el.attachEvent)IE8'de başarısız olacağına dikkat edin , çünkü desteklemediği XMLHttpRequest.attachEvent()için XMLHttpRequest.onload = function() {}onun yerine kullanmanız gerekir .

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

Yukarıdaki cevaplara göre hızlı bir Polyfill seçtim:

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

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

Tabii ki, yukarıdaki cevaplar gibi bu, window.attachEventbir sorun olabilir veya olmayabilir, var olduğunu garanti etmez .


0

JQuery kullanıyorsanız şunları yazabilirsiniz:

$( _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
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.