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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1677 天前的主题，其中的信息可能已经有所发展或是发生改变。

可以在 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 条回复 • 2020-05-27 16:03:09 +08:00

yuanfnadi

2020-05-27 08:52:12 +08:00 via iPhone

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

Mutoo

2020-05-27 08:55:42 +08:00

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

Perry

2020-05-27 08:57:44 +08:00

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

Yumwey

2020-05-27 09:02:34 +08:00 via Android

用事件委托

sybb

2020-05-27 09:27:37 +08:00

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

TomatoYuyuko

2020-05-27 09:30:48 +08:00

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

mengxzhou

2020-05-27 09:55:10 +08:00

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

shyangs

2020-05-27 09:56:42 +08:00

goog
js 事件代理事件委托

Losses

2020-05-27 10:02:04 +08:00

单层：
```
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

只是一个思路，供参考