addEventListener não funciona no IE8

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.

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.

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:

• MDN:: element.addEventListenerInternet Explorer legado e attachEvent
• MSDN: método attachEvent

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.

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

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

});

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

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.

Se você usa jQuery, pode escrever:

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