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

短命女 2023-03-06 05:19 2阅读 0赞

今天项目上遇到一个问题，是因为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);

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关 jquery on方法绑定事件后执行多次

**转自：https://blog.csdn.net/fun913510024/article/details/46971681 感谢*** ***$(“.test-...

叁歲伎倆/ 2024年04月18日 08:25/ 0 赞/ 82 阅读

相关 Jquery中按钮事件重复绑定导致事件多次触发解决办法

[https://blog.csdn.net/pedrojuliet/article/details/83111032][https_blog.csdn.net_pedroju

待我称王封你为后i/ 2023年10月07日 10:17/ 0 赞/ 72 阅读

相关通过addEventListener 绑定的事件会出现多次调用方法的情况

子页面给父页面传值： window.parent.postMessage('值', '父页面地址'); window.paren

傷城~/ 2023年07月10日 15:43/ 0 赞/ 25 阅读

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

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

短命女/ 2023年03月06日 05:19/ 0 赞/ 3 阅读

相关 uniapp: 防止按钮多次点击多次触发事件

[https://www.jianshu.com/p/94fccdd072c5][https_www.jianshu.com_p_94fccdd072c5] 1、在根目录下

墨蓝/ 2023年01月23日 13:49/ 0 赞/ 46 阅读

相关防止多次触发

//防止多次触发 var $this = $(this); var _nowTime

青旅半醒/ 2022年09月23日 05:59/ 0 赞/ 250 阅读

相关 vue 在组件中绑定的监听事件触发多次原因

在mounted生命周期中，使用 document.addEventListener("click", event => { console.log("c

红太狼/ 2022年09月15日 11:58/ 0 赞/ 311 阅读

相关给元素绑定事件的一些区别【多次绑定事件问题】

$('table1 tr td textarea').on('click', function () { $(this).at

阳光穿透心脏的1/2处/ 2022年08月06日 06:30/ 0 赞/ 240 阅读

相关【JS】原生JS事件绑定onclick和addEventListener

onclick绑定方式优点： \- 简洁 \- 处理事件的this关键字指向当前元素缺点： \- 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，

女爷i/ 2022年05月27日 04:42/ 0 赞/ 659 阅读

相关 JavaScript为什么多次绑定只有一次生效？

接上篇文章[JavaScript重识bind、call、apply][JavaScript_bind_call_apply] 1、先看一段代码： functi

小灰灰/ 2022年01月17日 20:55/ 0 赞/ 240 阅读