addEventListener ne fonctionne pas dans IE8

118

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.

ravi404
la source

Réponses:

215

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é.

Sudhir Bastakoti
la source
1
Une description des raisons pour lesquelles cela devrait être utilisé améliorera la réponse.
dkris
@dkris a ajouté une courte description à titre de clarification, j'espère que cela rend les choses un peu plus claires .. :)
Sudhir Bastakoti
44

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:

Zeta
la source
13

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.

Sergey Onishchenko
la source
+1, je pense que c'est une solution de contournement intelligente! addEventListenerLe troisième argument de est de toute façon facultatif, donc cela peut être une bonne solution, et c'est plus agréable que les branches if-else. Mais dans ce cas, _checkboxest l'élément cible, non window. :) Vous pourriez peut-être créer une fonction où la cible de l'événement est un autre argument.
Sk8erPeter
Oh, j'ai voté trop tôt ... :) J'obtiens un "TypeError: Illegal invocation" dans Chrome si j'essaie d' aliaser les addEventListenerappels des éléments de la cible d'événement - voir ce sujet: stackoverflow.com/questions/1007340/… . Donc, pour l' windowobjet, cela fonctionne correctement, mais ne fonctionne pas pour les autres nœuds à l'intérieur du document. De cette façon, votre aliasing suggéré n'est PAS correct pour le cas mentionné dans la question d'origine! Quelle serait votre solution de contournement?
Sk8erPeter
3

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);
}
Adriano Repetti
la source
2

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

});
Nicola Peluchetti
la source
2

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) {
}
Anon
la source
2

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.

Campbeln
la source
0

Si vous utilisez jQuery, vous pouvez écrire:

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