Javascript:addEventListener()，removeEventListener()和bind() [英] Javascript: addEventListener(), removeEventListener() and bind()

问题描述

我想添加事件监听器，我希望事件监听器调用的函数绑定到调用范围，并且我希望将来能够在任意日期删除监听器.

I want to add and event listener, I want the function the event listener calls to be bound to the calling scope and I want to be able to remove the listener at some arbitrary date in the future.

明显的事情不起作用:

function Thing(){
    this.thingINeed = "important!"
}

// the function that does the thing. 
Thing.prototype.handlerFunction = function(e){
    console.log(this.thingINeed)
    e.preventDefault;
}

// do the binding.
window.document.body.addEventListener('click', this.handlerFunction.bind());

// sometime later...this is my best guess. The event listener remains active. 
window.removeEventListener('click', this.handlerFunction.bind());

// this also doesn't work: 
window.removeEventListener('click', this.handlerFunction);

所以我整理了一些起作用的代码:

So I flogged together some code that does work:

function Thing(){
    this.thingINeed = "important!"
}

Thing.prototype.handlerFunction = function(e){
    console.log(this.thingINeed);
    e.preventDefault;
}

// Where the 'magic' happens...
this.boundHandlerFunction = this.handlerFunction.bind(this);

window.document.body.addEventListener('click', this.boundHandlerFunction);

// sometime later...
window.removeEventListener('click', this.boundHandlerFunction);

MDN 进行了一些详细介绍关于将事件侦听器与删除匹配，但没有提及.bind()，而且我找不到其他以这种方式执行此操作的示例.没有大量注释，代码并不完全清楚.

MDN goes into some detail on matching event listeners with removal, but it doesn't mention .bind() and I can't find any examples of other people doing it this way. The code isn't exactly obvious without extensive commenting.

有更好的方法吗?

可以命名jQuery事件侦听器，这确实使它们很容易删除，但是香草味是不可能的吗?

jQuery event listeners can be named, which makes them really easy to remove, but that isn't possible with vanilla?

谢谢.

推荐答案

问题归结为-Function.prototype.bind返回一个新函数.当您将绑定函数设置为变量并在addEventListener和removeEventListener中都使用它时，它会起作用，因为两者都引用相同的函数.代码的第一块不起作用，因为它们引用了不同的功能.这是一个人为的例子:

The issue boils down to - Function.prototype.bind returns a new function. It works when you set the bound function to a variable and use it in both addEventListener and removeEventListener because both are referencing the same function. The first block of code does not work because they are referencing different functions. Here is a contrived example:

function foo () {}

// does not work because foo.bind() returns a new function each time
// these functions are not the same object
document.addEventListener('click', foo.bind())
document.removeEventListener('click', foo.bind())

//does work because both reference the same function
var boundFoo = foo.bind()

document.addEventListener('click', boundFoo)
document.removeEventListener('click', boundFoo)

对于jQuery如何在后台处理事件我没什么好说的，但是香草JS并没有解决这个问题.

I can't speak much to how jQuery handles events under the hood, but there is no getting around this behavior in vanilla JS.

这篇关于Javascript:addEventListener()，removeEventListener()和bind()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！