在addEventListener时为签字函数通报参数

2024年1月22日 231次阅读 来源: vicco

  泡面近来在做一个基于Vue的组件，之间要用到经由过程addEventListener绑定鼠标事宜，但碰到一个比较恶心的题目。就是
需要在绑定匿名函数时刻通报参数，固然，这个很轻易，然则当你要动态移撤除这个匿名函数时就很麻烦了。

原由

有以下代码:

// 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上的参数

    原文作者：vicco
    原文地址: https://segmentfault.com/a/1190000018992792
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞