JS addEventListener多次绑定同一事件，触发多次

今天项目上遇到一个问题，是因为addEventListener绑定事件时，执行了多次，导致执行了多次事件。在不能让绑定事件执行一次的情况下有没有办法解决这个问题呢？

模拟代码：

function handleAction (event) {console.log('i am action', event);
}
var btn = document.getElementById('button');
btn.addEventListener('click', event => handleAction(event), false);
btn.addEventListener('click', event => handleAction(event), false);

可以用闭包解决这个问题

function handleAction (event) {console.log('i am action', event);
}
var newHandle = function (event) {handleAction(event)
}
var btn = document.getElementById('button');
btn.addEventListener('click', newHandle, false);
btn.addEventListener('click', newHandle, false);

我理解的原理就是浏览器认为 newHandle 是一个相同的方法，所以就不会绑定多次，比如用下面方法也不会绑定多次，但是event 值读取不到

function handleAction (event) {console.log('i am action', event);
}
var btn = document.getElementById('button');
btn.addEventListener('click', handleAction, false);
btn.addEventListener('click', handleAction, false);

JS addEventListener多次绑定同一事件，触发多次相关推荐

JS解决因循环绑定click事件失效
很多js新手都会在绑定事件遇到绑定失效的问题. 大致思路就是,比如用一个循环让对应的button按钮绑定对应的事件. 比如这样 <button id="1">1 < ...
js控制a标签点击事件触发下载
问题背景,动态获取data把url赋值到a标签的url中,让a标签自动下载首先想到的应该是$('xxx').click(), 查资料明白:js中的$(...).click()事件只能触发绑定的onC ...
JS前端CSS+元素，鼠标事件触发鼠标模形变成手状的形状
一:直接使用CSS样式改变当鼠标移动到元素上显示手状. style="cursor:pointer;" 二:使用JS触发事件改变原样式: 在鼠标事件onmouseover(鼠标移 ...
IE中输入框绑定input事件触发解析（input事件初始化自动执行问题解决）
在React项目中碰到了个问题,输入框绑定了input事件,在IE中初始化会自动执行,刚开始以为是只要有placeholder就会导致问题,后面网上搜了一轮,自己手撸了一下,总结了导致绑定的input ...
jQuery on 绑定的事件触发多次
jquery用on绑定事件,在代码执行过程中,可能会遇到多次执行的情况. 解决方案是在on的事件前面加上一个off,再on. $('#btnBind').off('click').on('click' ...
关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
uniapp 扫描枪获取条码不全解决办法，vue组件，使用双向绑定，回车事件触发，获取文本不全问题
原因分析: uniapp使用vue,双向绑定组件,在input标签loop事件循环获取文本的过程中,读取文本信息不是顺序读取,如果条码中包含了回车键,比如扫描枪,扫描文本后会追加回车键,监控文本读取还 ...

JS addEventListener多次绑定同一事件，触发多次

JS addEventListener多次绑定同一事件，触发多次相关推荐

最新文章

热门文章