/

將 click 事件添加到從 querySelectorAll 返回的 DOM 元素上

將 click 事件添加到從 querySelectorAll 返回的 DOM 元素上

如何迭代 NodeList 並為每個元素附加事件監聽器

您可以通過使用 for..of 循環迭代 document.querySelectorAll() 調用返回的所有元素來為它們添加事件監聽器：

1
2
3
4
5
6
const buttons = document.querySelectorAll("#select .button")
for (const button of buttons) {
 button.addEventListener('click', function(event) {
 //...
 })
}

需要注意的是，document.querySelectorAll() 返回的不是數組，而是 NodeList 對象。

如果你希望，你可以使用 forEach 或 for..of 對它進行迭代，或者使用 Array.from() 將它轉換為數組。

tags: [“JavaScript”, “DOM”, “Event listeners”, “querySelectorAll”]