Wie behandelt man Ereignisse für mehrere Elemente mit derselben Klasse in JavaScript?

Ereignisbehandlung für Elemente mit einer gemeinsamen Klasse

In Webanwendungen kann das Hinzufügen von Ereignis-Listenern zu mehreren Elementen mit derselben Klasse eine häufige Aufgabe sein. Dies ermöglicht ein standardisiertes Verhalten über ähnliche Elemente hinweg, wie z. B. Bestätigungsaufforderungen zum Löschen.

Erster Ansatz mit querySelector

Betrachten Sie den folgenden JavaScript-Code, der darauf abzielt, allen Elementen mit der Klasse einen Click-Event-Listener hinzuzufügen „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;
    }
});

Während dieser Code einen Ereignis-Listener für ein Element mit der Klasse „delete“ initialisiert, gelingt es ihm nicht, Listener für alle diese Elemente zu registrieren. Diese Einschränkung entsteht durch die Verwendung von querySelector, das nur das erste passende Element zurückgibt.

Lösung mit querySelectorAll

Um die Ereignisüberwachung auf mehrere Elemente zu erweitern, sollte querySelectorAll verwendet werden. Diese Methode gibt ein NodeList-Objekt zurück, das alle Elemente mit der angegebenen Klasse enthält. Das folgende Code-Snippet veranschaulicht dies:

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

Ereignis-Listener iterieren und hinzufügen

Mit der NodeList in der Hand können Sie nun ihre Elemente durchlaufen und Ereignis-Listener einzeln hinzufügen:

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

Ereignisverhinderungsbehandlung

Eine Anpassung besteht darin, Standardverhalten nur dann zu verhindern, wenn die Bestätigung falsch ist. Früher wurde die Rückgabe von „true“ verwendet, aber event.preventDefault() ist der richtige Ansatz im Kontext von Ereignis-Listenern.

Demo und erweiterte Optionen

Eine funktionierende Demonstration dieser Lösung finden Sie unter : http://jsfiddle.net/Rc7jL/3/.

Beachten Sie außerdem, dass es eine ES6-Version gibt, die Array.prototype.forEach-Iteration und Vorlagenzeichenfolgen für eine bessere Lesbarkeit des Codes verwendet.

Das obige ist der detaillierte Inhalt vonWie behandelt man Ereignisse für mehrere Elemente mit derselben Klasse in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!