addEventListener ne fonctionne pas dans IE8

Question

J'ai créé une case à cocher de façon dynamique. J'ai utilisé addEventListener pour appeler une fonction au clic de la case à cocher, ce 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.

Answer 1

Essayez :

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

Mise à jour : : Pour les versions d'Internet Explorer antérieures à IE9, attachEvent doit être utilisée pour enregistrer l'écouteur spécifié auprès de l'application EventTarget elle est sollicitée, pour d'autres addEventListener doit être utilisé.

Answer 2

Vous devez utiliser attachEvent dans les versions d'IE antérieures à IE9. Détecter si addEventListener est défini et utilise 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 aussi :

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

Answer 3

Il s'agit également d'une solution simple pour les navigateurs croisés :

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

Au lieu de "clic", il peut s'agir de n'importe quel événement, bien sûr.

Answer 4

IE ne prend pas en charge 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);
}

Answer 5

Il est peut-être plus facile (et plus performant) de déléguer la gestion des événements à un autre élément, par exemple votre tableau.

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

});

de cette façon, vous n'aurez qu'un seul gestionnaire d'événement, 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(){

});