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

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

Um einen Click-Event-Listener zu allen Elementen mit einer bestimmten Klasse hinzuzufügen, müssen Sie kann die Methode querySelectorAll() anstelle von querySelector() verwenden. Die Methode querySelector() gibt das erste übereinstimmende Element zurück, während querySelectorAll() eine NodeList aller übereinstimmenden Elemente zurückgibt.

Lösung:

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

Jetzt haben Sie es eine NodeList aller Löschlinks, Sie können sie durchlaufen und jedem einzelnen einen Ereignis-Listener 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();
        }
    });
}

In Im Ereignis-Listener können Sie mit dem Schlüsselwort this auf das aktuelle Element verweisen. Dadurch können Sie auf das Titelattribut des Elements zugreifen und dem Benutzer eine Bestätigungsmeldung anzeigen.

Hinweis: Es ist wichtig, event.preventDefault() zu verwenden, um die Standardaktion des zu verhindern Der Link wird nicht ausgeführt, wenn der Benutzer das Löschen bestätigt.

ES6-Version:

Verwendet ES6 können Sie den Code mit der forEach()-Methode vereinfachen:

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

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