Comment implémenter correctement un écouteur d'événement Click sur une classe JavaScript ?

Implémentation d'un écouteur d'événements de clic sur une classe en JavaScript

En JavaScript, les écouteurs d'événements sont la méthode privilégiée pour gérer les interactions des utilisateurs. Lorsque vous essayez d'obtenir un attribut à partir d'un élément cliqué, les écouteurs fournissent une approche plus efficace que l'utilisation de gestionnaires d'événements traditionnels.

Dans l'extrait de code fourni :

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

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

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

Le problème réside dans la façon dont addEventListener est invoqué. La fonction d'écoute d'événements myFunction est immédiatement exécutée en ajoutant les parenthèses après (myFunction()). Au lieu de cela, la référence de fonction elle-même doit être transmise comme deuxième argument.

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

De plus, getElementsByClassName renvoie une liste de nœuds, pas un élément HTML. Pour appliquer l'écouteur d'événements à chaque élément de la liste de nœuds, il doit être itéré :

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

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

Dans les navigateurs prenant en charge ES6, une solution plus concise peut être obtenue en utilisant la méthode forEach :

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

En abordant ces ajustements, le code devrait désormais capturer correctement l'attribut de l'élément cliqué à l'aide d'un écouteur d'événement JavaScript sans recourir à des bibliothèques externes comme jQuery.

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!