可以在 for 循环里，添加 btn.addEventListener("click", function(){...} 事件吗？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2194 days ago, the information mentioned may be changed or developed.

可以在 for 循环里，使用 btn.addEventListener("click", function(){...} 吗？

<script type="text/javascript">
    var btns = document.getElementsByTagName("button");
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener("click", function(){
            // do something;
        });
    }
</script>

16 replies • 2020-05-27 16:03:09 +08:00

yuanfnadi

May 27, 2020 via iPhone

可以，不过事件会冒泡，在父元素捕获的话，只需要一次。

Mutoo

May 27, 2020

另外还要注意 i 的引用问题。建议使用 arrow function，否则 function 引用的是闭包外的 i，当 click 事件触发时 i 永远是 btns.length

Perry

May 27, 2020

建议用 1 楼的方法在父元素捕获

Yumwey

May 27, 2020 via Android

用事件委托

sybb

May 27, 2020

这会都绑定在最后一个 btn 上吧

TomatoYuyuko

May 27, 2020

事件委托就是干这个的，你这么写太笨了

mengxzhou

May 27, 2020

用事件委托绑定在上层节点

shyangs

May 27, 2020

goog
js 事件代理事件委托

Losses

May 27, 2020

单层：
```
document.addEventListener('click', (event) => {
if (event.target.tagName !== 'BUTTON') return;
// do something;
})
```

如果是多层的话：
```
document.addEventListener("click", event => {
if (!event.target.closest("button")) return;
console.log("Doing something");
});
```

Demo:
https://codesandbox.io/s/compassionate-williams-09ssq

只是一个思路，供参考