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.

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


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:


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.


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

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

});

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

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.


0

Si vous utilisez jQuery, vous pouvez écrire:

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

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
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.