addEventListener não funciona no IE8

118

Eu criei uma caixa de seleção dinamicamente. Eu costumava addEventListenerchamar uma função ao clicar na caixa de seleção, que funciona no Google Chrome e no Firefox, mas não funciona no Internet Explorer 8 . Este é o meu código:

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

setCheckedValues é meu manipulador de eventos.

Ravi404
fonte

Respostas:

215

Experimentar:

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

Update :: Para versões do Internet Explorer anteriores ao IE9, o método attachEvent deve ser usado para registrar o ouvinte especificado no EventTarget em que ele é chamado, para outros, addEventListener deve ser usado.

Sudhir Bastakoti
fonte
1
Uma descrição de por que isso deve ser usado melhorará a resposta.
dkris
@dkris adicionou uma breve descrição como um esclarecimento, espero que isso torne as coisas um pouco mais claras .. :)
Sudhir Bastakoti
44

Você deve usar attachEventem versões do IE anteriores ao IE9. Detecte se addEventListenerestá definido e use attachEventse não estiver:

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

Observe que o IE11 será removidoattachEvent .

Veja também:

Zeta
fonte
13

Esta também é uma solução simples para crossbrowser:

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

Em vez de 'clique' pode ser qualquer evento, é claro.

Sergey Onishchenko
fonte
1, acho que esta é uma solução inteligente! addEventListenerO terceiro argumento de é opcional de qualquer maneira, então esta pode ser uma boa solução, e é melhor do que os ramos if-else. Mas, neste caso, _checkboxé o elemento de destino, não window. :) Então, talvez você possa criar uma função em que o destino do evento seja outro argumento.
Sk8erPeter
Oh, eu votei muito cedo ... :) Recebo um "TypeError: Invocação ilegal" no Chrome se tento criar um alias para addEventListenerchamadas de elementos de destino de evento - consulte este tópico: stackoverflow.com/questions/1007340/… . Portanto, para o windowobjeto, ele funciona corretamente, mas não funciona para outros nós dentro do documento. Desta forma, o seu alias sugerido NÃO é correto para o caso mencionado na pergunta original! Qual seria a sua solução alternativa?
Sk8erPeter
3

O IE não oferece suporte addEventListeneraté a versão 9, então você tem que usar attachEvent, aqui está um exemplo:

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

Talvez seja mais fácil (e tem mais desempenho) se você delegar a manipulação de eventos a outro elemento, por exemplo, sua tabela

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

});

dessa forma, você terá apenas um manipulador de eventos, e isso funcionará também para elementos recém-adicionados. Isso requer jQuery> = 1,7

Caso contrário, use delegate ()

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

});
Nicola Peluchetti
fonte
2

Você pode usar a função addEvent () abaixo para adicionar eventos para a maioria das coisas, mas observe que XMLHttpRequest if (el.attachEvent)irá falhar no IE8, porque não oferece suporte, XMLHttpRequest.attachEvent()então você deve usar em seu 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) {
}
Anon
fonte
2

Optei por um Polyfill rápido com base nas respostas acima:

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

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

Claro, como as respostas acima, isso não garante que window.attachEventexista, o que pode ou não ser um problema.

Campbeln
fonte
0

Se você usa jQuery, pode escrever:

$( _checkbox ).click( function( e ){ /*process event here*/ } )
philipp
fonte
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
}
Pramod Kumar
fonte