Wie füge ich Ereignis-Listener zu mehreren Elementen mit derselben Klasse in JavaScript hinzu?

Ereignis-Listener zu mehreren Elementen mit derselben Klasse hinzufügen

In der Webentwicklung ist es oft notwendig, Ereignis-Listener zu mehreren Elementen mit hinzuzufügen gleiche Klasse. Dies kann mit der Methode querySelectorAll() von JavaScript erreicht werden.

Anfängliches Problem:

Das bereitgestellte Code-Snippet versucht, allen Elementen mit der Funktion „delete“ einen Ereignis-Listener hinzuzufügen. Klasse. Der Listener wird jedoch nur zum ersten Element dieser Klasse hinzugefügt, obwohl das beabsichtigte Verhalten darin besteht, ihn allen solchen Elementen hinzuzufügen.

Lösung:

Zu Um dieses Problem zu beheben, muss querySelectorAll() anstelle von querySelector() verwendet werden, um alle Elemente mit der Klasse „delete“ auszuwählen. querySelector() gibt nur das erste passende Element zurück, während querySelectorAll() eine NodeList zurückgibt, die alle passenden Elemente enthält.

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

Mit diesem Code ist ein Ereignis-Listener erfolgreich zu jedem Element mit der Klasse „delete“ hinzugefügt.

Sonstiges Überlegungen:

• Es ist erwähnenswert, dass die Rückgabe von false/true nur für Event-Handler nützlich ist, die mit onclick = function() {...} gebunden sind. Für addEventListening sollte event.preventDefault() verwendet werden.
• Der obige ES5-Code kann mithilfe der Array.prototype.forEach-Iteration in ES6 sauberer und sicherer gemacht werden:

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üge ich Ereignis-Listener zu mehreren Elementen mit derselben Klasse in JavaScript hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!