Heim > Web-Frontend > js-Tutorial > Wie behandelt man Ereignisse für mehrere Elemente mit derselben Klasse in JavaScript?

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

Linda Hamilton
Freigeben: 2024-11-11 05:40:02
Original
310 Leute haben es durchsucht

How to Handle Events for Multiple Elements with the Same Class 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;
    }
});
Nach dem Login kopieren

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');
Nach dem Login kopieren

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();
        }
    });
}
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage