「JavaScript」removeEventListener 移除带参数的方法

背景

假如我添加了一个带参数的防抖监听事件：

document.addEventListener("keyup", debounce(handle, 50, true));

那么在需要移除事件的时候，使用下面的语句是没有效果的：

document.removeEventListener("keyup", debounce(handle, 50, true));
document.removeEventListener("keyup", debounce);

那该怎么办呢？

解决方法

方法一

在添加监听事件之前我们需要用一个变量代替一下，通过bind函数将参数传入赋值给tmpFunc，此时tmpFunc就变成了一个带参数handle, 50, true的debounce函数：

var tmpFunc = debounce.bind(this, handle, 50, true);

然后将tmpFunc作为需要执行的函数加入addEventListener这样移除就很方便了：

xxxx.addEventListener('xxx', tmpFunc);

经过tmpFunc变量的处理，只需移除tmpFunc即可移除该函数：

if (tmpFunc !== null) {
    xxx.removeEventListener('xxx', tmpFunc);
    tmpFunc = null;
}

方法二

直接把带参数的debounce函数调用嵌套在一个函数tmpFunc中，然后使用该函数即可。（如果需要event事件参数则需要手动传递一下）

function tmpFunc(){
    debounce(handle, 50, true);
}

xxxx.addEventListener('xxx', tmpFunc);

xxx.removeEventListener('xxx', tmpFunc);