首頁  >  文章  >  web前端  >  如何在一行程式碼中將事件偵聽器新增至多個元素?

如何在一行程式碼中將事件偵聽器新增至多個元素?

Susan Sarandon
Susan Sarandon原創
2024-10-26 08:29:03827瀏覽

How can I add event listeners to multiple elements in a single line of code?

在單行中向多個元素添加事件監聽器

使用多個元素時,向每個元素添加事件監聽器可能很乏味單獨一個。值得慶幸的是,有一種方法可以簡化此過程,並在一行程式碼中將事件偵聽器新增至多個元素。

使用循環

一種有效的方法是使用循環遍歷元素數組並向每個元素添加事件偵聽器。例如:

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

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

此程式碼選擇與指定選擇器相符的所有元素,並為「input」事件的每個元素新增一個事件偵聽器。

語法問題

您可能已經注意到第二個範例中的語法問題:

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

此語法在語法上不正確。正確的寫法是:

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

但是,這種方法仍然效率不高,因為它為每個元素單獨添加了一個事件監聽器。上面概述的循環方法是一種更優化的解決方案。

以上是如何在一行程式碼中將事件偵聽器新增至多個元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn