有没有更好的方法将一个功能用于多个按钮

Question

我正在尝试为多个按钮使用一个函数。我有一个循环，每次点击按钮，我都想在元素中添加一个特定的类

for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", openAside);
}

function openAside() {
document.querySelectorAll("#overlay").classList.add("active");
}

但不知什么原因，我得了

无法读取未定义的属性'add'在HTMLDivElement.openSide

我觉得这是一个基本错误，但我是javascript的新手，我真的无法理解。

Answer 1

document.querySelectorAll()返回一个节点列表(元素的集合(，而元素的集合没有classList，单个元素有。相反，使代码

this.classList.add("active");

因为this将首先绑定到触发事件回调的对象，该对象是您希望将样式添加到的元素。

但是，更好的是，不要在所有按钮上循环并为每个按钮附加相同的事件侦听器，而是使用事件委派，只需向所有按钮的父按钮添加一个事件侦听器。因为事件是冒泡的，所以事件将到达父级并在那里进行处理。当它被处理时，使用event.target可以访问最初触发事件的对象，并以这种方式对其进行操作。

这里有一个例子：

// Add the event listener to the parent
document.querySelector(".buttons").addEventListener("click", function(event){
// Whichever button was clicked will be the: event.target
event.target.classList.toggle("active");
});

.active { background-color:#ff0; }

<div class="buttons">
<button type="button">One</button> 
<button type="button">Two</button> 
<button type="button">Three</button>
</div>