Wie hänge ich einen Click-Event-Listener ordnungsgemäß an mehrere Elemente derselben Klasse in JavaScript an?

JavaScript-Ereignis-Listener für Klicks auf eine Klasse

Um einen Klick-Ereignis-Listener an eine Klasse anzuhängen, können Sie die Methode addEventListener() verwenden. Diese Methode benötigt drei Argumente:

• Der Ereignistyp (z. B. „Klick“)
• Eine Listener-Funktion
• Ein optionales Capture-Flag (normalerweise falsch)

In Ihrem Beispiel verwenden Sie die Methode addEventListener() korrekt. Es gibt jedoch zwei Probleme:

1. Fehler bei der Elementauswahl

Sie wählen die Klassenelemente mit document.getElementsByClassName("classname") aus, das eine HTMLCollection oder eine NodeList zurückgibt (je nachdem). des Browsers). Da es sich nicht um Arrays handelt, können Sie die Array-Klammernotation nicht verwenden, um jedem Klassenelement direkt einen Ereignis-Listener hinzuzufügen.

2. Fehler bei der Ereignis-Listener-Funktion

In Ihrer Ereignis-Listener-Funktion rufen Sie sie auf, wenn Sie sie an die Klassenelemente anhängen. Dies bedeutet, dass die Funktion sofort ausgeführt wird, wenn der Listener hinzugefügt wird. Stattdessen sollten Sie die Funktion als Referenz übergeben, ohne sie aufzurufen:

classname.addEventListener('click', myFunction, false);

Korrigierter Code

Hier ist der korrigierte Code:

var elements = document.getElementsByClassName("classname");

var myFunction = function() {
    var attribute = this.getAttribute("data-myattribute");
    alert(attribute);
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunction, false);
}

Dieser Code fügt nun korrekt jedem Klassenelement einen Ereignis-Listener hinzu und löst die bereitgestellte Funktion aus, wenn auf das Element geklickt wird, wodurch die Elemente des Elements angezeigt werden data-myattribute-Attributwert in einer Warnung.

Das obige ist der detaillierte Inhalt vonWie hänge ich einen Click-Event-Listener ordnungsgemäß an mehrere Elemente derselben Klasse in JavaScript an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!