addEventListener non funziona in IE8

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.

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 .

È necessario utilizzare attachEventnelle versioni di IE precedenti a IE9. Rileva se addEventListenerè definito e usa attachEventse non lo è:

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

Nota che IE11 rimuoveràattachEvent .

Guarda anche:

• MDN:: element.addEventListenerLegacy Internet Explorer e attachEvent
• MSDN: metodo attachEvent

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.

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

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

});

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

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.

Se usi jQuery puoi scrivere:

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