Warum funktioniert „classname.addEventListener(\'click\', myFunction(), false);' nicht beim Hinzufügen von Ereignis-Listenern zu Klassen?

Ereignis-Listener für Klassen: Ein praktischer Leitfaden

Bei der Suche nach der Erfassung von Klassenattributwerten bei Klicks ist möglicherweise ein Problem mit Ihrem JavaScript-Code aufgetreten. Insbesondere die Zeile classname.addEventListener('click', myFunction(), false); Es können keine Ereignis-Listener für die Elemente registriert werden.

Um dieses Problem zu beheben, analysieren wir den Code Schritt für Schritt:

1. getElementsByClassName: Diese Methode wählt Elemente korrekt aus mit dem angegebenen Klassennamen. Sie gibt jedoch kein Array zurück, sondern ein Array-ähnliches Objekt namens HTMLCollection.
2. addEventListener: Diese Methode benötigt drei Parameter: (a) Ereignistyp (in diesem Fall „Klick“ ), (b) Ereignis-Listener-Funktion und (c) Erfassungsphase (normalerweise falsch für Bubbling-Ereignisse). Im Code wird myFunction() sofort ausgeführt, wenn die Methode addEventListener aufgerufen wird, und übergibt das Ergebnis des Funktionsaufrufs als Ereignis-Listener. Das ist falsch.
3. Die Funktion: Die anonyme Funktion myFunction ruft das Attribut „data-myattribute“ ab und zeigt es in einer Alarmbox an. Dieser Teil des Codes ist korrekt.

Korrigierter Code:

Um das Problem zu beheben, müssen wir Ereignis-Listener korrekt an jedes von getElementsByClassName zurückgegebene Element anhängen . 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);
}

Erklärung der Korrektur:

1. Array-ähnliches Objekt:Wir speichern die HTMLCollection in der Elemente variabel zur besseren Nutzung.
2. Looping: Zum Anhängen Listener für jedes Element, wir iterieren über die Elemente Array-ähnliches Objekt mit einer Schleife.
3. EventListener: Es wird die richtige Syntax zum Hinzufügen eines Ereignis-Listeners verwendet, wobei die myFunction als Listener übergeben wird.

In ES6 kann das Hinzufügen von Schleifen und Ereignis-Listenern besser erreicht werden Kurz gesagt:

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

Bei älteren Browsern wie IE6-8 sollten Sie vor der Verwendung prüfen, ob getElementsByClassName vorhanden ist.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „classname.addEventListener(\'click\', myFunction(), false);' nicht beim Hinzufügen von Ereignis-Listenern zu Klassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!