Wie füge ich Ereignis-Listener zu mehreren Elementen in einer Zeile JavaScript hinzu?

Ereignis-Listener zu mehreren Elementen in einer Zeile hinzufügen

Beim Arbeiten mit mehreren HTML-Elementen kann es umständlich sein, jedem Element Ereignis-Listener hinzuzufügen eins einzeln. Glücklicherweise gibt es eine effizientere Möglichkeit, dies mit JavaScript zu erreichen.

Bedenken Sie den folgenden Codeausschnitt:

<p>Example 1:</p>
<pre class="brush:php;toolbar:false">element1.addEventListener("input", function() {
  // this function does stuff 
});

Example 2:

element1 &&& element2.addEventListener("input", function() {
  // this function does stuff
});

Während Beispiel 1 einem einzelnen Element einen Ereignis-Listener hinzufügt, versucht Beispiel 2 dies Fügen Sie mehreren Elementen einen Ereignis-Listener hinzu. Allerdings ist die Syntax für Beispiel 2 falsch.

Die Lösung liegt in der Verwendung der forEach()-Methode von JavaScript. Angenommen, Sie verfügen über ein Array mit den Elementen, denen Sie Ereignis-Listener hinzufügen möchten. In diesem Fall können Sie den folgenden Code verwenden:

let elementsArray = document.querySelectorAll("whatever");

elementsArray.forEach(function(elem) {
    elem.addEventListener("input", function() {
        // This function does stuff
    });
});

In diesem Code gibt querySelectorAll("whatever") ein Array von Elementen zurück, die mit dem angegebenen Selektor übereinstimmen. Die forEach()-Methode durchläuft dann jedes Element im Array und fügt den gewünschten Ereignis-Listener hinzu.

Diese Methode bietet eine übersichtliche und effiziente Möglichkeit, Ereignis-Listener gleichzeitig zu mehreren Elementen hinzuzufügen. Durch die Verwendung von Arrays und der forEach()-Methode können Sie Coderedundanz reduzieren und die Effizienz Ihrer JavaScript-Projekte verbessern.

Das obige ist der detaillierte Inhalt vonWie füge ich Ereignis-Listener zu mehreren Elementen in einer Zeile JavaScript hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!