addEventListener non funziona in IE8


118

Ho creato dinamicamente una casella di controllo. Ho usato addEventListenerper chiamare una funzione facendo clic sulla casella di controllo, che funziona in Google Chrome e Firefox ma non funziona in Internet Explorer 8 . Questo è il mio codice:

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

setCheckedValues è il mio gestore di eventi.

Risposte:


215

Provare:

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

Update :: Per le versioni di Internet Explorer precedenti a IE9, utilizzare il metodo attachEvent per registrare il listener specificato nell'EventTarget su cui è chiamato, per gli altri dovrebbe essere utilizzato addEventListener .


1
Una descrizione del motivo per cui questo dovrebbe essere utilizzato migliorerà la risposta.
dkris

@dkris ha aggiunto una breve descrizione come chiarimento, spero che renda le cose un po 'più chiare .. :)
Sudhir Bastakoti


13

Questa è anche una semplice soluzione crossbrowser:

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

Invece di "clic" può essere qualsiasi evento ovviamente.


+1, penso che questa sia una soluzione intelligente! addEventListenerIl terzo argomento è comunque facoltativo, quindi questa può essere una buona soluzione, ed è più piacevole dei rami if-else. Ma in questo caso, _checkboxè l'elemento di destinazione, non window. :) Quindi forse potresti creare una funzione in cui l'obiettivo dell'evento è un altro argomento.
Sk8erPeter

Oh, ho votato troppo presto ... :) Ottengo un "TypeError: Illegal invocation" in Chrome se provo ad alias le addEventListenerchiamate degli elementi target dell'evento - vedi questo argomento: stackoverflow.com/questions/1007340/… . Quindi per l' windowoggetto, funziona correttamente, ma non funziona per altri nodi all'interno del documento. In questo modo l'aliasing suggerito NON è corretto per il caso menzionato nella domanda originale! Quale sarebbe la tua soluzione alternativa?
Sk8erPeter

3

IE non supporta addEventListenerfino alla versione 9, quindi devi usare attachEvent, ecco un esempio:

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

2

Forse è più facile (e ha più prestazioni) se deleghi la gestione degli eventi a un altro elemento, ad esempio il tuo tavolo

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

});

in questo modo avrai un solo gestore di eventi, e questo funzionerà anche per gli elementi appena aggiunti. Ciò richiede jQuery> = 1.7

Altrimenti usa delegate ()

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

});

2

Puoi usare la seguente funzione addEvent () per aggiungere eventi per la maggior parte delle cose, ma nota che per XMLHttpRequest if (el.attachEvent)fallirà in IE8, perché non supporta XMLHttpRequest.attachEvent()quindi devi usare XMLHttpRequest.onload = function() {}invece.

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

Ho optato per un Polyfill veloce in base alle risposte sopra:

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

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

Ovviamente, come le risposte sopra, questo non garantisce che window.attachEventesista, il che può essere o meno un problema.


0

Se usi jQuery puoi scrivere:

$( _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
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.