addEventListener não está funcionando no IE8

Eu criei uma checkbox de seleção dinamicamente. Eu usei addEventListener para chamar uma function ao clicar na checkbox 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 events.

Experimentar:

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

Atualização :: 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, o addEventListener deve ser usado.

Você tem que usar attachEvent nas versões do IE antes do IE9. Detectar se addEventListener está definido e use attachEvent se não for:

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

Observe que o IE11 removerá attachEvent .

Veja também:

  • MDN: element.addEventListener : herdado do Internet Explorer e attachEvent
  • MSDN: método attachEvent

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

 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 suporta addEventListener até 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); } 

Mayb é mais fácil (e tem mais desempenho) se você delegar o tratamento de events para outro elemento, por exemplo, sua tabela

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

Desta forma, você terá apenas um manipulador de events, 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 function addEvent () abaixo para adicionar events para a maioria das coisas, mas note que para XMLHttpRequest if (el.attachEvent) irá falhar no IE8, porque ele não suporta XMLHttpRequest.attachEvent() então você tem que usar XMLHttpRequest.onload = function() {} vez disso.

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

Eu optei por um Polyfill rápido baseado nas respostas acima:

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

É claro que, como as respostas acima, isso não garante que window.attachEvent exista, o que pode ou não ser um problema.

Se você usa o jQuery, você 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 }