it-swarm.com.de

addEventListener funktioniert nicht im IE8

Ich habe dynamisch eine Checkbox angelegt. Ich habe addEventListener verwendet, um beim Anklicken des Kontrollkästchens eine Funktion aufzurufen, die in Google Chrome und Firefox funktioniert, jedoch nicht in Internet Explorer 8. Das ist mein Code:

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

setCheckedValues ist mein Eventhandler.

114
ravi404

Versuchen:

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

Update :: Bei Internet Explorer-Versionen vor IE9 sollte die Methode attachEvent verwendet werden, um den angegebenen Listener bei EventTarget zu registrieren, für den andere aufgerufen werden addEventListener sollte verwendet werden.

212

Sie müssen attachEvent in IE - Versionen vor IE9 verwenden. Ermitteln Sie, ob addEventListener definiert ist, und verwenden Sie attachEvent, falls dies nicht der Fall ist:

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

Beachten Sie, dass IE11 attachEvent entfernt.

Siehe auch:

43
Zeta

Dies ist auch eine einfache Crossbrowser-Lösung:

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

Anstelle von "Klick" kann natürlich auch jedes Ereignis stattfinden. 

13

IE unterstützt addEventListener erst ab Version 9, daher müssen Sie attachEvent verwenden. Hier ein Beispiel:

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

Sie können die unten stehende addEvent () - Funktion verwenden, um Ereignisse für die meisten Dinge hinzuzufügen. Beachten Sie jedoch, dass if (el.attachEvent) für XMLHttpRequest im IE8 fehlschlägt, da XMLHttpRequest.attachEvent() nicht unterstützt wird. Sie müssen stattdessen XMLHttpRequest.onload = function() {} verwenden.

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
Anon

Ich habe mich für eine schnelle Polyfill entschieden, die auf den obigen Antworten basiert:

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

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

Wie bei den obigen Antworten wird natürlich nicht sichergestellt, dass window.attachEvent vorhanden ist. Dies kann ein Problem sein oder nicht.

2
Campbeln

Mayb ist einfacher (und bietet mehr Leistung), wenn Sie die Ereignisbehandlung an ein anderes Element delegieren, beispielsweise an Ihre Tabelle

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

});

auf diese Weise haben Sie nur einen Event-Handler, und dies funktioniert auch für neu hinzugefügte Elemente. Dies erfordert jQuery> = 1.7

Ansonsten benutze delegate ()

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

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

Wenn Sie jQuery verwenden, können Sie schreiben:

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