2012-03-19 21 views
113

He creado una casilla de verificación dinámicamente. He usado 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:addEventListener no funciona en IE8

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

setCheckedValues es mi controlador de eventos.

Respuesta

211

Probar:

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

actualización :: Para las versiones de Internet Explorer anteriores a IE9, attachEvent método debe utilizarse para registrar el detector especificado a la EventTarget se llama en adelante, para otros addEventListener debe ser utilizado.

+1

Una descripción de por qué debe usarse esto mejorará la respuesta. – dkris

+0

@dkris agregó una breve descripción como aclaración, espero que las cosas sean un poco más claras .. :) –

43

Tienes que usar attachEvent en las versiones de IE anteriores a IE9. Detectar si se define addEventListener y utilizar attachEvent si no lo es:

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

Tenga en cuenta que IE11 will remove attachEvent.

Consulte también:

0

Si utiliza jQuery se puede escribir:

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

Mayb es más fácil (y tiene más rendimiento) si delegar la gestión de eventos a otro elemento, por ejemplo, su mesa de

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

}); 

de esta manera va a tener un solo controlador de eventos, y esto va a funcionar también para los elementos recién agregados Esto requiere jQuery> = 1,7

De lo contrario usar delegado()

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

}); 
3

IE no soporta addEventListener hasta la versión 9, así que hay que utilizar attachEvent, he aquí un ejemplo:

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

Esto también es una solución simple de navegador:

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

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

+0

+1, ¡creo que es una solución inteligente! El tercer argumento de 'addEventListener' es opcional de todos modos, por lo que esta puede ser una buena solución, y es más agradable que las ramas if-else. Pero en este caso, '_checkbox' es el elemento de destino, no' ventana'. :) Entonces, tal vez podrías crear una función donde el objetivo del evento sea otro argumento. – Sk8erPeter

+0

Oh, he subido demasiado pronto ... :) Obtengo _ _ TypeError: invocación ilegal _ en Chrome si intento alias las llamadas a los elementos de destino del evento '' addEventListener' - vea este tema: http://stackoverflow.com/questions/1007340/javascript-function-aliasing-doesnt-seem-to-work. Entonces, para el objeto 'window', funciona correctamente, pero no funciona para otros nodos dentro del documento. ¡De esta manera, su alias sugerido NO es correcto para el caso mencionado en la pregunta original! ¿Cuál sería tu solución? – Sk8erPeter

2

puede utilizar la función el siguiente addEvent() para añadir eventos para la mayoría de las cosas, sino en cuenta que para XMLHttpRequest if (el.attachEvent) fallará en IE8, ya que no es compatible con XMLHttpRequest.attachEvent() lo que tiene que utilizar 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) { 
} 
2

he optado 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 asegura que window.attachEvent existe, que puede o no ser un problema.

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 
} 
+3

es mucho mejor mostrar qué significa el código o agregar algunas notas. Gracias – toha

Cuestiones relacionadas