addEventListener ne fonctionne pas dans IE8

J'ai créé une case à cocher de manière dynamique. J'avais l'habitude addEventListenerd'appeler une fonction en cliquant sur la case à cocher, qui fonctionne dans Google Chrome et Firefox mais ne fonctionne pas dans Internet Explorer 8 . Voici mon code:

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

setCheckedValues est mon gestionnaire d'événements.

Essayer:

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

Update :: Pour les versions d'Internet Explorer antérieures à IE9, la méthode attachEvent doit être utilisée pour inscrire l'écouteur spécifié dans le EventTarget sur lequel il est appelé, pour les autres addEventListener doit être utilisé.

Vous devez utiliser attachEventdans les versions IE antérieures à IE9. Détectez si addEventListenerest défini et utilisez attachEventsi ce n'est pas le cas:

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

Notez que IE11 supprimeraattachEvent .

Voir également:

• MDN:: element.addEventListenerLegacy Internet Explorer et attachEvent
• MSDN: méthode attachEvent

C'est aussi une solution de crossbrowser simple:

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

Au lieu de «clic» peut être n'importe quel événement bien sûr.

IE ne prend pas en charge addEventListenerjusqu'à la version 9, vous devez donc utiliser attachEvent, voici un exemple:

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

Peut-être que c'est plus facile (et a plus de performances) si vous déléguez la gestion des événements à un autre élément, par exemple votre table

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

});

de cette façon, vous n'aurez qu'un seul gestionnaire d'événements, et cela fonctionnera également pour les éléments nouvellement ajoutés. Cela nécessite jQuery> = 1.7

Sinon, utilisez delegate ()

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

});

Vous pouvez utiliser la fonction addEvent () ci-dessous pour ajouter des événements pour la plupart des choses, mais notez que pour XMLHttpRequest if (el.attachEvent)échouera dans IE8, car il ne prend pas en charge XMLHttpRequest.attachEvent(), vous devez donc l'utiliser à la XMLHttpRequest.onload = function() {}place.

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

J'ai opté pour un Polyfill rapide basé sur les réponses ci-dessus:

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

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

Bien sûr, comme les réponses ci-dessus, cela ne garantit pas qu'il window.attachEventexiste, ce qui peut ou non être un problème.

Si vous utilisez jQuery, vous pouvez écrire:

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