可以在 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>
1
yuanfnadi 2020-05-27 08:52:12 +08:00 via iPhone 4
可以,不过事件会冒泡,在父元素捕获的话,只需要一次。
|
2
Mutoo 2020-05-27 08:55:42 +08:00
另外还要注意 i 的引用问题。建议使用 arrow function,否则 function 引用的是闭包外的 i,当 click 事件触发时 i 永远是 btns.length
|
3
Perry 2020-05-27 08:57:44 +08:00
建议用 1 楼的方法在父元素捕获
|
4
Yumwey 2020-05-27 09:02:34 +08:00 via Android
用事件委托
|
5
sybb 2020-05-27 09:27:37 +08:00
这会都绑定在最后一个 btn 上吧
|
6
TomatoYuyuko 2020-05-27 09:30:48 +08:00
事件委托就是干这个的,你这么写太笨了
|
7
mengxzhou 2020-05-27 09:55:10 +08:00
用事件委托绑定在上层节点
|
8
shyangs 2020-05-27 09:56:42 +08:00
goog
js 事件代理 事件委托 |
9
Losses 2020-05-27 10:02:04 +08:00 1
单层:
``` 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 只是一个思路,供参考 |
10
luogege 2020-05-27 10:13:31 +08:00 via Android
把 var 换个 let 比较好
|
11
violetlai 2020-05-27 10:29:57 +08:00
target 来做会好一些
|
12
Doracis 2020-05-27 10:32:06 +08:00
之前在网上看到冒泡捕获的例子,好像就是你这个问题,我记得是可以把监听绑在父层去调用,具体代码你搜冒泡捕获关键字,在简书还是 cnblog 上就有的
|
14
CodingNaux 2020-05-27 10:40:47 +08:00
《 JavaScript 高级程序设计》或者《 javascript 权威指南》两者选一本看看
|
15
lvming6816077 2020-05-27 11:09:05 +08:00
如果在回调里获取 i 会始终是一个值,参考 JavaScript 闭包
|
16
minglanyu 2020-05-27 16:03:09 +08:00
事件委托
|