javascript - addEventListener no funciona en IE8

internet-explorer-8

Question

He creado una casilla de verificación de forma dinámica. He utilizado addEventListener para llamar a una función al hacer clic en la casilla de verificación, que funciona en Google Chrome y Firefox pero no funciona en Internet Explorer 8 . Este es mi código:

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

setCheckedValues es mi controlador de eventos.

Answer 1

Esta es también una solución simple de navegador cruzado:

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

En lugar de ''clic'' puede ser cualquier evento, por supuesto.

Answer 2

IE no admite addEventListener hasta la versión 9, por lo que debe usar attachEvent , aquí hay un ejemplo:

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

Answer 3

Mayb es más fácil (y tiene más rendimiento) si delega el manejo de eventos a otro elemento, por ejemplo, su tabla

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

de esta forma, solo tendrá un controlador de eventos, y esto también funcionará para los elementos recién agregados. Esto requiere jQuery> = 1.7

De lo contrario, use delegate ()

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

Answer 4

Opté por un Polyfill rápido basado en las respuestas anteriores:

//# Polyfill
window.addEventListener = window.addEventListener || function (e, f) { window.attachEvent(''on'' + e, f); };
//# Standard usage
window.addEventListener("message", function(){ /*...*/ }, false);

Por supuesto, al igual que las respuestas anteriores, esto no garantiza que window.attachEvent exista, lo que puede o no ser un problema.

Answer 5

Puede usar la función addEvent () para agregar eventos para la mayoría de las cosas, pero tenga en cuenta que para XMLHttpRequest if (el.attachEvent) fallará en IE8, porque no es compatible con XMLHttpRequest.attachEvent() por lo que debe usar XMLHttpRequest.onload = function() {} lugar.

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 6

Si usas jQuery puedes escribir:

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

Answer 7

Tienes que usar attachEvent en las versiones de IE anteriores a IE9. Detecta si addEventListener está definido y usa attachEvent si no lo está:

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

Tenga en cuenta que IE11 eliminará attachEvent .

Ver también:

• MDN: element.addEventListener : Internet Explorer heredado y attachEvent
• MSDN: método attachEvent

Answer 8

Tratar:

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

Actualización :: Para las versiones de Internet Explorer anteriores a IE9, se debe usar el método attachEvent para registrar el oyente especificado para EventTarget que se EventTarget , para otros se debe usar addEventListener .

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
}