在addEventListener时为具名函数传递参数，同时还能移除它

  泡面最近在作一个基于Vue的组件，之间要用到经过addEventListener绑定鼠标事件，但遇到一个问题。就是 须要在绑定匿名函数时候传递参数，固然，这个很容易，可是当你要动态移除掉这个匿名函数时就很麻烦了。那有没有一种我即不使用匿名函数也能传递参数，这样我就能很方便的在后期使用removeEventListener移除掉它。固然有！

问题

有以下代码:

// bind event
element.addEventListener('click', _bindEventHandler)
// unbind event
element.removeEventListener('click', _bindEventHandler)
复制代码

我若是在使用具名函数传递参数呢？ 固然能够这样：

element.addEventListener('click', function() {
  _bindEventHandler(param1, param2)
})
复制代码

问题，分析与解决

但，这样有个问题就是，我若是再想同步的移除该绑定事件，那就没法移除了，由于没有函数名称，咱们在移除的时候没法直接进行经过removeEventListener进行移除。 So，泡面这里想到了一个曲线救国的办法，那就是将参数直接绑定在element上，由于咱们在使用具名函数时，addEventListener会静默将事件的event传递给函数。所以当咱们再想找回这些参数，咱们就能够直接经过event.target来获取。

// 设置参数
element._params = { param1, param2 }
// 绑定事件
element.addEventListener('click', _bindEventHandler)
// 在函数中获取参数
function _bindEventHandler(event) {
  const params = event.target._params
  // ...do sth after
}
复制代码

OK，这样咱们就实现了参数的传递， 同时也能够很方便的移除绑定事件了！ 是否是很开心？

one more thing

有个问题，当我绑定的element事件遇到事件委托时，就须要额外处理一下。例如咱们在绑定一个有层级结构的按钮或者DOM时， 当点击内部的DOM，咱们会没法获取到在实际绑定事件的DOM上设置的参数。 这里咱们就须要经过遍历事件绑定的对象来获取参数了。

咱们能够经过event.path(event.composedPath())来获取Dom上的参数