Wie füge ich Click-Event-Listener zu mehreren Elementen derselben Klasse hinzu?

Hinzufügen von Click-Event-Listenern zu Elementen mit derselben Klasse

In diesem Szenario haben Sie eine Listenansicht zum Löschen von IDs und möchten hinzufügen eine Bestätigungsmeldung für alle Elemente mit der Klasse „delete“. Sie sind jedoch auf ein Problem gestoßen, bei dem nur das erste Element der Klasse den Listener zu empfangen scheint.

Lösung

Um dieses Problem zu beheben, müssen Sie querySelectorAll verwenden anstelle von querySelector. querySelectorAll gibt eine NodeList zurück, die alle Elemente mit der angegebenen Klasse enthält:

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

Jetzt können Sie die NodeList durchlaufen und jedem Element Ereignis-Listener hinzufügen:

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

Zusätzlich nur verhindern die Standardaktion, wenn der Benutzer den Löschvorgang nicht bestätigt. Dadurch wird sichergestellt, dass der Löschvorgang nur dann ausgeführt wird, wenn der Benutzer sich ausdrücklich zum Fortfahren entscheidet.

ES6-Verbesserungen

Mit ES6 können Sie die Schleife mithilfe von Array.prototype.forEach vereinfachen :

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

Diese Version verwendet Vorlagenzeichenfolgen (eingeführt in ES2015) zur Vereinfachung Syntax.

Das obige ist der detaillierte Inhalt vonWie füge ich Click-Event-Listener zu mehreren Elementen derselben Klasse hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!