在addEventListener时为具名函数传递参数,同时还能移除它
时间: 2023-07-15 18:15:05 浏览: 53
可以使用闭包来实现。具体做法是,定义一个闭包函数,该函数返回一个具名函数,并且在该闭包函数中保存传递的参数。具名函数可以通过闭包函数返回,从而绑定到事件监听器上。当需要移除该监听器时,可以使用具名函数作为参数调用 removeEventListener 方法。
下面是一个示例代码:
```
function addEventListenerWithParams(target, type, listener, params) {
function closure(event) {
listener.call(this, event, params);
}
target.addEventListener(type, closure);
return closure;
}
// 使用示例
const button = document.querySelector('button');
const params = { text: 'Hello, world!' };
const listener = function(event, params) {
console.log(params.text);
};
const closure = addEventListenerWithParams(button, 'click', listener, params);
// 移除监听器
button.removeEventListener('click', closure);
```
在上面的代码中,`addEventListenerWithParams` 函数接收四个参数:目标元素,事件类型,具名函数和参数。该函数使用闭包来创建 `closure` 函数,并将 `listener` 函数和 `params` 参数保存在闭包中。然后将 `closure` 函数绑定到目标元素的事件监听器上,并返回该函数。
当目标元素触发事件时,`closure` 函数被调用,并将事件对象和保存在闭包中的参数传递给 `listener` 函数。这使得我们可以在 `listener` 函数中访问传递的参数。
最后,我们可以使用返回的 `closure` 函数作为参数来调用 `removeEventListener` 方法,以便在需要移除监听器时清除它。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)