如何在一行 JavaScript 中為多個元素新增事件監聽器？

為一行中的多個元素新增事件監聽器

使用多個HTML 元素時，新增事件監聽器可能會很麻煩單獨一個。幸運的是，有一個更有效的方法可以使用 JavaScript 來實現此目的。

請考慮以下程式碼片段：

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

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

範例 1 將事件偵聽器新增至單一元素，而範例 2 則嘗試將事件偵聽器新增至多個元素。然而，例 2 的語法不正確。

解在於使用 JavaScript 的 forEach() 方法。假設您有一個數組，其中包含要新增事件偵聽器的元素。在這種情況下，您可以使用以下程式碼：

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

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

在此程式碼中，querySelectorAll("whatever") 傳回與指定選擇器相符的元素陣列。然後，forEach() 方法會迭代數組中的每個元素並新增所需的事件偵聽器。

此方法提供了一種簡潔且有效率的方法來同時為多個元素新增事件偵聽器。透過利用陣列和 forEach() 方法，您可以減少程式碼冗餘並提高 JavaScript 專案的效率。

以上是如何在一行 JavaScript 中為多個元素新增事件監聽器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！