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