addEventListener 为数组更改多个按钮颜色？答案

【问题标题】：addEventListener for an array to change multiple button colors?addEventListener 为数组更改多个按钮颜色？
【发布时间】：2019-06-25 19:36:51
【问题描述】：

它一直告诉我 buttonArray.addEventListener 不是一个函数，我不确定为什么。对 JS 来说还是新手，任何帮助表示赞赏。

尝试做一个 forEach 没有帮助。

let button = document.querySelectorAll('.btn');
console.log(button);

let buttonArray = Array.from(button);

buttonArray.addEventListener('mouseover', event => {
    event.target.style.color = 'red';
});

【问题讨论】：

有什么理由不使用简单的 CSS 规则 .btn:hover { color: red; } ？

标签： javascript arrays dom

【解决方案1】：

您需要将事件侦听器附加到按钮本身而不是按钮数组。试试这个

 let button = document.querySelectorAll('.btn');
 console.log(button);

 let buttonArray = Array.from(button);

 buttonArray.forEach(btn => {
   btn.addEventListener('mouseover', event => {
     event.target.style.color = 'red';
   });
 });

【讨论】：

【解决方案2】：

使用这个，你正在返回一个数组，你必须将事件添加到每个元素

let button = document.querySelectorAll('.btn');
console.log(button);

let buttonArray = Array.from(button);//this is an array here
console.log(buttonArray)
//using foreach to add eventlistener to every element in array
buttonArray.forEach(a=>a.addEventListener('mouseover', event => {
    event.target.style.color = 'red';
}))

<button class="btn">hello</button>
<button class="btn">hello</button>
<button class="btn">hello</button>
<button class="btn">hello</button>

【讨论】：

【解决方案3】：

您需要在loop 中使用for of 和addEventListener 遍历整个数组

let button = document.querySelectorAll('.btn');
console.log(button);

let buttonArray = Array.from(button);
for(let button of buttonArray){
    button.addEventListener('mouseover', event => {
        event.target.style.color = 'red';
    });
}

【讨论】：