Comment ajouter des écouteurs d'événements à plusieurs éléments avec la même classe en JavaScript ?

Ajout d'écouteurs d'événements à plusieurs éléments avec la même classe

Dans le développement Web, il est souvent nécessaire d'ajouter des écouteurs d'événements à plusieurs éléments avec l'option même classe. Ceci peut être réalisé à l'aide de la méthode querySelectorAll() de JavaScript.

Problème initial :

L'extrait de code fourni tente d'ajouter un écouteur d'événement à tous les éléments avec l'option "supprimer". classe. Cependant, il ajoute uniquement l'auditeur au premier élément de cette classe, même si le comportement prévu est de l'ajouter à tous ces éléments.

Solution :

Pour pour résoudre ce problème, il est nécessaire d'utiliser querySelectorAll() au lieu de querySelector() pour sélectionner tous les éléments avec la classe "delete". querySelector() renvoie uniquement le premier élément correspondant, tandis que querySelectorAll() renvoie une NodeList contenant tous les éléments correspondants.

Le code révisé :

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

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

Avec ce code, un écouteur d'événement est réussi ajouté à chaque élément avec la classe "delete".

Autre Considérations :

• Il convient de noter que return false/true n'est utile que pour les gestionnaires d'événements liés à onclick = function() {...}. Pour addEventListening, event.preventDefault() doit être utilisé.
• Le code ES5 ci-dessus peut être rendu plus propre et plus sûr à l'aide de l'itération Array.prototype.forEach dans ES6 :

Array.from(deleteLinks).forEach(link => {
    link.addEventListener('click', function(event) {
        if (!confirm(`sure u want to delete ${this.title}`)) {
            event.preventDefault();
        }
    });
});

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!