Wie fügt man in JavaScript einen Click-Event-Listener zu mehreren Elementen derselben Klasse hinzu?

Hinzufügen von Klickereignis-Listenern zu Elementen mit derselben Klasse

Um allen Elementen mit einer bestimmten Klasse einen Klickereignis-Listener hinzuzufügen, können Sie dies tun Verwenden Sie querySelectorAll() anstelle von querySelector(), um alle passenden Elemente abzurufen.

JavaScript-Code:

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

In diesem Code:

• var deleteLinks = document.querySelectorAll('.delete');ruft alle Elemente mit der Klasse „delete“ ab.
• Die Die folgende for-Schleife durchläuft die Liste der Elemente.
• Für jedes Element wird ein Ereignis-Listener hinzugefügt, der auf das click-Ereignis wartet.
• Wenn die Funktion confirm("sure u want to delete " this.title) false zurückgibt, verhindert der Aufruf event.preventDefault() das Standardverhalten der Klickereignis (z. B. Absenden eines Formulars).

Zusätzliche Hinweise:

• Es ist erwähnenswert, dass nur querySelector() gibt ein einzelnes Element zurück, während querySelectorAll() eine NodeList zurückgibt.
• Die Verwendung von event.preventDefault() eignet sich zum Verhindern von Formularübermittlungen oder anderen Standardaktionen bei der Verwendung addEventListener().

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