addEventListener funktioniert nicht in IE8

118

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.

ravi404
quelle

Antworten:

215

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.

Sudhir Bastakoti
quelle
1
Eine Beschreibung, warum dies verwendet werden sollte, verbessert die Antwort.
dkris
@dkris fügte eine kurze Beschreibung als Klarstellung hinzu, ich hoffe, das macht die Dinge ein bisschen klarer .. :)
Sudhir Bastakoti
44

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:

Zeta
quelle
13

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.

Sergey Onishchenko
quelle
+1, ich denke das ist eine kluge Problemumgehung! addEventListenerDas dritte Argument ist ohnehin optional, daher kann dies eine gute Lösung sein, und es ist schöner als die if-else-Zweige. Aber in diesem Fall _checkboxist das Zielelement nicht window. :) Vielleicht könnten Sie eine Funktion erstellen, bei der das Ereignisziel ein weiteres Argument ist.
Sk8erPeter
Oh, ich habe zu früh upvoted ... :) Ich erhalte in Chrome einen "TypeError: Illegal Invocation", wenn ich versuche, die addEventListenerAufrufe von Ereigniszielelementen zu aliasen - siehe dieses Thema: stackoverflow.com/questions/1007340/… . Für das windowObjekt funktioniert es also korrekt, aber nicht für andere Knoten im Dokument. Auf diese Weise ist Ihr vorgeschlagenes Aliasing für den in der ursprünglichen Frage genannten Fall NICHT korrekt! Was wäre Ihre Problemumgehung?
Sk8erPeter
3

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);
}
Adriano Repetti
quelle
2

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

});
Nicola Peluchetti
quelle
2

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) {
}
Anon
quelle
2

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.

Campbeln
quelle
0

Wenn Sie jQuery verwenden, können Sie schreiben:

$( _checkbox ).click( function( e ){ /*process event here*/ } )
philipp
quelle
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
}
Pramod Kumar
quelle