web-dev-qa-db-fra.com

addEventListener ne fonctionne pas dans IE8

J'ai créé une case à cocher dynamiquement. J'ai utilisé addEventListener pour appeler une fonction en cliquant sur la case à cocher, qui fonctionne dans Google Chrome et Firefox mais ne fonctionne pas dans Internet Explorer 8 . Ceci est mon code:

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

setCheckedValues est mon gestionnaire d'événements.

javascriptinternet-explorer-8addeventlistener
114
ravi404

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 enregistrer le programme d'écoute spécifié dans le EventTarget auquel il est appelé, pour les autres. addEventListener devrait être utilisé.

212
Sudhir Bastakoti

Vous devez utiliser attachEvent dans les versions IE antérieures à IE9. Détectez si addEventListener est défini et utilisez attachEvent si 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 supprimera attachEvent .

Voir également:

43
Zeta

C'est aussi une solution simple de crossbrowser:

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

Au lieu de "cliquer" peut être n'importe quel événement bien sûr. 

13
Sergey Onishchenko

IE ne supporte pas addEventListener jusqu'à la version 9, vous devez donc utiliser attachEvent, voici un exemple:

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

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 XMLHttpRequest.attachEvent() en charge, vous devez donc utiliser XMLHttpRequest.onload = function() {} à la 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) {
}
2
Anon

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 l'existence de window.attachEvent, ce qui peut poser problème ou non.

2
Campbeln

Peut-être que c'est plus facile (et plus performant) 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 manière, vous ne disposerez que d’un seul gestionnaire d’événements, ce qui fonctionnera également pour les éléments nouvellement ajoutés. Cela nécessite jQuery> = 1.7

Sinon, utilisez delegate ()

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

});
2
Nicola Peluchetti
if (document.addEventListener) {
    document.addEventListener("click", attachEvent, false);
}
else {
    document.attachEvent("onclick", attachEvent);
}
function attachEvent(ev) {
    var target = ev.target || ev.srcElement;
    // custom code
}
0
Pramod Kumar

Si vous utilisez jQuery, vous pouvez écrire:

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