美文网首页
JS addEventListener多次绑定同一事件,触发多次

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

作者: Dannn_Y | 来源:发表于2017-07-01 22:21 被阅读2269次

这两天遇到一个问题,循环出来的组件,添加了相同的监听事件‘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);

只需要将函数重新包装一下,用一个变量接收一个匿名函数,达到一个闭包的效果。

参考链接 hope help

相关文章

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

    这两天遇到一个问题,循环出来的组件,添加了相同的监听事件‘click’,但当click事件触发的时候,会执行好几次...

  • jquery为什么要用bind和unbind?

    主要用于避免一个绑定事件提交多次 先解绑所有事件,再绑定事件 这样防止一个事件重复绑定多次造成多次触发

  • JS的事件绑定

    绑定事件 onclick,无兼容性问题,但是多次绑定会互相覆盖 addEventListener,w3c的标准方式...

  • js事件

    行间事件 js中绑定 addEventListener注册

  • JavaScript事件

    事件分类 事件的绑定方法 通过标签绑定事件 通过js获取DOM元素绑定事件 通过addEventListener属...

  • vue中bus.$on事件被多次绑定

    vue中eventbus被多次触发(vue中使用eventbus踩过的坑)【bus.$on事件被多次绑定】 问题描...

  • 2019-08-28 事件

    可以通过绑定事件,触发元素样式的变化。 addEventListener() 方法。addEventListene...

  • js 防抖动

    问题:针对频繁触发scoll resize绑定的事件函数,有可能短时间多次触发时事件,影响性能。思路:多个函数调用...

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

    uniapp: 防止按钮多次点击多次触发事件 1、在根目录下新建 common 文件并创建 common.js ...

  • 2019-11-04 JS 事件冒泡和捕获

    联系: 都是事件触发时序的问题绑定事件方法(addEventListener)的第三个参数是控制事件触发顺序的;默...

网友评论

      本文标题:JS addEventListener多次绑定同一事件,触发多次

      本文链接:https://www.haomeiwen.com/subject/jhpbcxtx.html