Comment gérer les événements de plusieurs éléments avec la même classe en JavaScript ?

Gestion des événements pour les éléments avec une classe commune

Dans les applications Web, l'ajout d'écouteurs d'événements à plusieurs éléments avec la même classe peut être une tâche courante. Cela permet un comportement standardisé entre des éléments similaires, tels que des invites de confirmation de suppression.

Approche initiale avec querySelector

Considérez le code JavaScript suivant visant à ajouter un écouteur d'événement de clic à tous les éléments de la classe "delete":

var deleteLink = document.querySelector('.delete');

deleteLink.addEventListener('click', function(event) {
    event.preventDefault();

    var choice = confirm("sure u want to delete?");
    if (choice) {
        return true;
    }
});

Bien que ce code initialise un écouteur d'événement pour un élément avec la classe "delete", il ne parvient pas à enregistrer les auditeurs pour tous ces éléments. Cette limitation provient de l'utilisation de querySelector, qui renvoie uniquement le premier élément correspondant.

Solution avec querySelectorAll

Pour étendre l'événement en écoutant plusieurs éléments, querySelectorAll doit être utilisé. Cette méthode renvoie un objet NodeList contenant tous les éléments de la classe spécifiée. L'extrait de code suivant illustre ceci :

var deleteLinks = document.querySelectorAll('.delete');

Itération et ajout d'écouteurs d'événements

Avec la NodeList en main, vous pouvez désormais parcourir ses éléments et ajouter des écouteurs d'événements individuellement :

for (var i = 0; i < deleteLinks.length; i++) {
    deleteLinks[i].addEventListener('click', function(event) {
        if (!confirm("sure u want to delete " + this.title)) {
            event.preventDefault();
        }
    });
}

Gestion de la prévention des événements

Un ajustement consiste à empêcher le comportement par défaut uniquement lorsque la confirmation est FAUX. Auparavant, renvoyer true était utilisé, mais event.preventDefault() est l'approche appropriée dans le contexte des écouteurs d'événements.

Démo et options étendues

Une démonstration fonctionnelle de cette solution peut être trouvée sur : http://jsfiddle.net/Rc7jL/3/.

De plus, notez qu'il existe une version ES6, qui utilise Array.prototype.forEach itération et chaînes de modèles pour une meilleure lisibilité du code.

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!