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

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

Pour ajouter un écouteur d'événements de clic à tous les éléments avec une classe particulière, vous peut utiliser la méthode querySelectorAll() au lieu de querySelector(). La méthode querySelector() renvoie le premier élément correspondant, tandis que querySelectorAll() renvoie une NodeList de tous les éléments correspondants.

Solution :

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

Maintenant que vous avez une NodeList de tous les liens de suppression, vous pouvez les parcourir et ajouter un écouteur d'événement à chacun un.

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

Dans l'écouteur d'événement, vous pouvez utiliser le mot-clé this pour faire référence à l'élément actuel. Cela vous permet d'accéder à l'attribut title de l'élément et d'afficher un message de confirmation à l'utilisateur.

Remarque : Il est important d'utiliser event.preventDefault() pour empêcher l'action par défaut de l'élément. le lien ne s'effectue pas si l'utilisateur confirme la suppression.

ES6 Version :

En utilisant ES6, vous pouvez simplifier le code en utilisant la méthode forEach() :

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!