Wie implementiert man einen Click-Event-Listener korrekt in einer JavaScript-Klasse?

Implementieren eines Click-Event-Listeners für eine Klasse in JavaScript

In JavaScript sind Ereignis-Listener die bevorzugte Methode für die Verarbeitung von Benutzerinteraktionen. Beim Versuch, ein Attribut aus einem angeklickten Element abzurufen, bieten Listener einen effizienteren Ansatz als die Verwendung herkömmlicher Ereignishandler.

Im bereitgestellten Codeausschnitt:

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

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

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

Das Problem liegt darin, wie addEventListener aufgerufen wird. Die Ereignis-Listener-Funktion myFunction wird sofort ausgeführt, indem die Klammern dahinter hinzugefügt werden (myFunction()). Stattdessen sollte die Funktionsreferenz selbst als zweites Argument übergeben werden.

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

Zusätzlich gibt getElementsByClassName eine Knotenliste und kein HTML-Element zurück. Um den Ereignis-Listener auf jedes Element in der Knotenliste anzuwenden, sollte er über Folgendes iteriert werden:

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

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

In Browsern mit ES6-Unterstützung kann eine präzisere Lösung mit der forEach-Methode erreicht werden:

Array.from(elements).forEach(function(element) {
    element.addEventListener('click', myFunction);
});

Durch die Behebung dieser Anpassungen sollte der Code nun das Attribut des angeklickten Elements mithilfe eines JavaScript-Ereignis-Listeners korrekt erfassen, ohne auf externe Bibliotheken zurückgreifen zu müssen jQuery.

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Click-Event-Listener korrekt in einer JavaScript-Klasse?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!