JS|JS addEventListener多次绑定同一事件,触发多次
这两天遇到一个问题,循环出来的组件,添加了相同的监听事件‘click’,但当click事件触发的时候,会执行好几次处理action的方法。很明显这是一个问题,我们想要的是就算同一个组件添加多次监听事件,但在监听到的事件执行时,也只是触发一次action方法。从网上找到了一些解决办法,在这里记录下来。
- 下面是我模拟问题写的伪代码
function handleAction (event) {
console.log('im action', event);
}var btn = document.getElementById('button');
btn.addEventListener('click', event => handleAction(event), false);
btn.addEventListener('click', event => handleAction(event), false);
像上面这样处理函数,在控制台打印出来的结果是两次,但我们不想要它打印两次,我们想不管监听几次,在触发事件执行的时候,只执行一遍handleAction 函数。
- 从网上找了一些资料,也有人遇到相同的问题,以下是解决方案。
function handleAction (event) {
console.log('im action', event);
}var newHandle = function (event) {
handleAction(event);
}var btns = document.getElementById('btn');
btns.addEventListener('click', newHandle, false);
btns.addEventListener('click', newHandle, false);
只需要将函数重新包装一下,用一个变量接收一个匿名函数,达到一个闭包的效果。
【JS|JS addEventListener多次绑定同一事件,触发多次】参考链接 hope help
推荐阅读
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 事件解绑与解绑的兼容代码
- 移动端事件绑定
- 1.块级作用域绑定
- 服务器|用旧手机搭建服务器并实现内网穿透不需要root(本人亲测很多次最简单的一个)
- 事件绑定的方式
- 如何理解vue数据双向绑定原理
- 读《财富自由之路》笔记2021-05-18把一份时间出售多次
- vuejs|vuejs 数据绑定原理
- 程序员|vue数据双向绑定,Android-MVP模式详解,附超全教程文档