Pourquoi `classname.addEventListener(\'click\', myFunction(), false);` ne fonctionne-t-il pas pour ajouter des écouteurs d'événements aux classes ?

Écouteur d'événements pour la classe : un guide pratique

Dans le but de capturer les valeurs des attributs de classe lors des clics, vous avez peut-être rencontré un problème avec votre code JavaScript. Plus précisément, la ligne classname.addEventListener('click', myFunction(), false); ne parvient pas à enregistrer les écouteurs d'événements sur les éléments.

Pour résoudre ce problème, analysons le code étape par étape :

1. getElementsByClassName : Cette méthode sélectionne correctement les éléments avec le nom de classe spécifié. Cependant, elle ne renvoie pas un tableau mais un objet de type Array appelé HTMLCollection.
2. addEventListener : Cette méthode prend trois paramètres : (a) le type d'événement (dans ce cas, 'cliquez' ), (b) fonction d'écoute d'événements et (c) phase de capture (généralement fausse pour les événements bouillonnants). Dans le code, myFunction() est exécuté immédiatement lorsque la méthode addEventListener est invoquée, transmettant le résultat de l'appel de fonction en tant qu'écouteur d'événement. C'est incorrect.
3. La fonction : La fonction anonyme myFunction récupère l'attribut "data-myattribute" et l'affiche dans une boîte d'alerte. Cette partie du code est correcte.

Code corrigé :

Pour résoudre le problème, nous devons attacher correctement les écouteurs d'événement à chaque élément renvoyé par getElementsByClassName . Voici le code corrigé :

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

Explication de la correction :

1. Objet de type tableau : Nous stockons la HTMLCollection dans le éléments variables pour une meilleure utilisation.
2. Boucle : Pour attacher écouteurs à chaque élément, nous parcourons les éléments Objet de type tableau à l'aide d'une boucle.
3. EventListener : La syntaxe correcte pour ajouter un écouteur d'événement est utilisée, en passant myFunction comme écouteur.

Dans ES6, l'ajout de boucles et d'écouteurs d'événements peut être réalisé davantage de manière concise :

Array.from(elements).forEach(function(element) {
  element.addEventListener('click', myFunction);
});

Pour les navigateurs plus anciens, comme IE6-8, pensez à vérifier l'existence de getElementsByClassName avant de l'utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!