Comment attacher correctement un écouteur d'événement de clic à plusieurs éléments avec la même classe en JavaScript ?

Écouteur d'événements JavaScript pour les clics sur la classe

Pour attacher un écouteur d'événements de clic à une classe, vous pouvez utiliser la méthode addEventListener(). Cette méthode prend trois arguments :

• Le type d'événement (par exemple, 'clic')
• Une fonction d'écoute
• Un indicateur de capture facultatif (généralement faux)

Dans votre exemple, vous utilisez correctement la méthode addEventListener(). Cependant, il y a deux problèmes :

1. Erreur de sélection d'élément

Vous sélectionnez les éléments de classe à l'aide de document.getElementsByClassName("classname"), qui renvoie une HTMLCollection ou une NodeList (selon le navigateur). Ce ne sont pas des tableaux, vous ne pouvez donc pas utiliser la notation entre crochets de tableau pour attacher directement un écouteur d'événement à chaque élément de classe.

2. Erreur de fonction d'écoute d'événement

Dans votre fonction d'écoute d'événement, vous l'appelez lorsque vous l'attachez aux éléments de classe. Cela signifie que la fonction est immédiatement exécutée lorsque l'écouteur est ajouté. Au lieu de cela, vous devez transmettre la fonction comme référence sans l'appeler :

classname.addEventListener('click', myFunction, false);

Code corrigé

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

Ce code ajoutera désormais correctement un écouteur d'événement à chaque élément de classe et déclenchera la fonction fournie lorsque l'on clique sur l'élément, affichant le nom de l'élément. valeur de l'attribut data-myattribute dans une alerte.

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!