addEventListener funktioniert nicht in IE8

Ich habe dynamisch ein Kontrollkästchen erstellt. Ich habe addEventListenerbeim Klicken auf das Kontrollkästchen eine Funktion aufgerufen, die in Google Chrome und Firefox funktioniert, in Internet Explorer 8 jedoch nicht . Das ist mein Code:

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

setCheckedValues ist mein Event-Handler.

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 für das aufgerufene EventTarget zu registrieren. Für andere sollte addEventListener verwendet werden.

Sie müssen attachEventin IE-Versionen vor IE9 verwenden. Ermitteln Sie, ob addEventListeneres definiert ist, und verwenden Sie es, attachEventwenn 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 entfernt wirdattachEvent .

Siehe auch:

• MDN element.addEventListener:: Legacy Internet Explorer und attachEvent
• MSDN: attachEvent-Methode

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 "Klicken" kann natürlich jedes Ereignis sein.

IE wird erst addEventListenerab Version 9 unterstützt, daher müssen Sie Folgendes verwenden attachEvent: Hier ein Beispiel:

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

Vielleicht ist es einfacher (und leistungsfähiger), wenn Sie die Ereignisbehandlung an ein anderes Element delegieren, z. B. Ihre Tabelle

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

});

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

Andernfalls verwenden Sie delegate ()

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

});

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

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

Ich habe mich aufgrund der obigen Antworten für eine schnelle Polyfüllung entschieden:

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

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

Wie die obigen Antworten stellt dies natürlich nicht sicher, dass es window.attachEventexistiert, was ein Problem sein kann oder nicht.

Wenn Sie jQuery verwenden, können Sie schreiben:

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