在addEventListener时为具名函数传递参数

Youngs 发布于2019-08-23 17:08 / 3429人阅读

摘要：泡面最近在做一个基于的组件，之间要用到通过绑定鼠标事件，但遇到一个比较恶心的问题。就是需要在绑定匿名函数时候传递参数，当然，这个很容易，但是当你要动态移除掉这个匿名函数时就很麻烦了。

泡面最近在做一个基于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上的参数

云服务器 GPU云服务器具名函数 html参数传递参数参数传递对象参数传递

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103873.html

VUE防抖与节流的最佳解决方案——函数式组件

摘要：案例持续触发事件时，并不立即执行函数，当毫秒内没有触发事件时，才会延时触发一次函数。也以函数形式暴露普通插槽。这样的场景组件用函数式组件是非常方便的。相关阅读函数式组件自定义指令前言有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts...

OldPanda 2019-05-22 19:08 评论0 收藏0
Vue.js-组件详解

摘要：事件总线事件总线首先创建了一个名为的空的实例然后全局定义了组件最后创建了实例。在父组件模板中，子组件标签上使用指定一个名称，并在父组件内通过来访问指定名称的子组件。学习笔记：组件详解组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-component, {}); 要在父实例中使用这个组件，必须要...

jeffrey_up 2019-08-23 16:02 评论0 收藏0
Vue-组件详解

摘要：除了监听事件外，还可以用于组件之间的自定义事件。它仅仅作为一个直接访问子组件的应急方案，应当避免在模板或计算属性中使用。将和合并成，会自动去判断是普通标签还是组件。子组件这里的状态绑定的是父组件的数据。查看原文站点，更多扩展内容及更佳阅读体验！组件详解组件与复用 Vue组件需要注册后才可以使用。注册有全局注册和局部注册两种方式。全局注册 Vue.component(my-com...

dadong 2019-08-26 12:00 评论0 收藏0
详解vue组件三大核心概念

摘要：前言本文主要介绍属性事件和插槽这三个基础概念使用方法及其容易被忽略的一些重要细节。至于如何改变，我们接下去详细介绍单向数据流这个概念出现在组件通信。比如上例中在子组件中修改父组件传递过来的数组从而改变父组件的状态。的一个核心思想是数据驱动。前言本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们...

rickchen 2019-08-23 17:51 评论0 收藏0
JS学习系列 03 - 函数作用域和块作用域

摘要：在及之前版本，只拥有函数作用域，没有块作用域和除外。函数表达式分为匿名函数表达式和具名函数表达式。但是，由于这个事件回调函数形成了一个覆盖当前作用域的闭包，引擎极有可能依然保存着这个数据结构取决于具体实现。总结函数是中最常见的作用域单元。在 ES5 及之前版本，JavaScript 只拥有函数作用域，没有块作用域（with 和 try...catch 除外）。在 ES6 中，JS 引...

Ashin 2019-08-20 14:28 评论0 收藏0