addEventListener non funziona in IE8

Question

Ho creato una casella di controllo in modo dinamico. Ho usato addEventListener per chiamare una funzione al clic della 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.

Answer 1

Prova:

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

aggiornamento :: Per le versioni di Internet Explorer precedenti alla IE9, attachEvent metodo deve essere utilizzato per registrare il listener specificato alla EventTarget si chiama via, per altri addEventListener dovrebbe essere usato.

Answer 2

È necessario utilizzare attachEvent in versioni IE precedenti a IE9. Rilevare se addEventListener è definito e utilizzare attachEvent se non lo è:

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

noti che IE11 will remove attachEvent.

Consulta anche:

• MDN: element.addEventListener: Legacy Internet Explorer and attachEvent
• MSDN: attachEvent method

Answer 3

Se si utilizza jQuery si può scrivere:

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

Answer 4

Mayb è più facile (e ha più prestazioni) se delegare la gestione degli eventi ad un altro elemento, per esempio il vostro tavolo

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

}); 

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

Altrimenti utilizzare delegato()

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

}); 

Answer 5

IE non supporta addEventListener fino alla versione 9, quindi bisogna usare attachEvent, ecco un esempio:

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

Answer 6

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 fare clic 'può essere qualsiasi evento, naturalmente.

Answer 7

È possibile utilizzare la funzione di sotto addEvent() per aggiungere eventi per la maggior parte delle cose, ma di notare che per XMLHttpRequest if (el.attachEvent) fallirà in IE8, perché non sostenere XMLHttpRequest.attachEvent() quindi bisogna 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) { 
} 

Answer 8

ho optato per un Polyfill rapida basata sulle risposte di cui sopra:

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

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

Naturalmente, come le risposte di cui sopra questo non garantisce che window.attachEvent esiste, che può essere o non essere un problema.

Answer 9

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