调用removeEventListener无法移除事件？Topaz签名板事件绑定问题

问题根源 #

每次调用Function.prototype.bind()都会生成一个全新的函数实例，这就是问题的核心：

• 你调用removeEventListener时传入的是SignResponse.bind(this, self)生成的新函数，这个函数和之前添加的监听函数不是同一个引用。
• 因此removeEventListener找不到要移除的目标，无法生效；随后你又调用addEventListener添加了新的绑定函数，最终就出现了“没移除反而新增”的情况。

修复方案 #

提前把绑定后的函数保存为变量，后续移除和添加都使用这个统一的引用：

var self = this;

function SignResponse(myself, event) {
    //do stuff
}

// 先绑定函数并保存引用
const boundSignResponse = SignResponse.bind(this, self);

// 移除时使用保存好的引用
document.removeEventListener('SignResponse', boundSignResponse, false);
// 添加时同样使用这个引用
document.addEventListener('SignResponse', boundSignResponse, false);

额外说明 #

• bind()的特性就是返回新函数，用于固定this指向和预设参数，所以不能在addEventListener和removeEventListener中分别调用bind，否则每次都会生成不同的函数。
• 不管用哪种方式绑定this（比如箭头函数），都要保证添加和移除监听时使用的是同一个函数引用，否则都会出现类似的移除失效问题。

内容的提问来源于stack exchange，提问作者thecoolmacdude