除去使用绑定添加的事件侦听器

在JavaScript中,删除使用bind()添加为事件侦听器的函数的最佳方法是什么?

(function(){ // constructor MyClass = function() { this.myButton = document.getElementById("myButtonID"); this.myButton.addEventListener("click", this.clickListener.bind(this)); }; MyClass.prototype.clickListener = function(event) { console.log(this); // must be MyClass }; // public method MyClass.prototype.disableButton = function() { this.myButton.removeEventListener("click", ___________); }; })(); 

我能想到的唯一方法是跟踪每个用bind绑定的监听器。

上面这个方法的例子:

 (function(){ // constructor MyClass = function() { this.myButton = document.getElementById("myButtonID"); this.clickListenerBind = this.clickListener.bind(this); this.myButton.addEventListener("click", this.clickListenerBind); }; MyClass.prototype.clickListener = function(event) { console.log(this); // must be MyClass }; // public method MyClass.prototype.disableButton = function() { this.myButton.removeEventListener("click", this.clickListenerBind); }; })(); 

有没有更好的方法来做到这一点?

虽然@machineghost说的是真实的,事件也是以同样的方式join和删除的,但方程式的缺失部分是这样的:

调用.bind()后创build一个新的函数引用!

请参阅bind()是否更改函数引用? | 如何永久设置?

因此,要添加或删除它,请将引用分配给一个variables:

 var x = this.myListener.bind(this); Toolbox.addListener(window, 'scroll', x); Toolbox.removeListener(window, 'scroll', x); 

这符合我的预期。

对于那些在向Flux存储库注册/删除React组件的过程中遇到这个问题的人,将下面的代码添加到组件的构造函数中:

 class App extends React.Component { constructor(props){ super(props); // it's a trick! needed in order to overcome the remove event listener this.onChange = this.onChange.bind(this); } // then as regular... componentDidMount (){ AppStore.addChangeListener(this.onChange); } componentWillUnmount (){ AppStore.removeChangeListener(this.onChange); } onChange () { let state = AppStore.getState(); this.setState(state); } render() { // ... } } 

是否使用绑定函数并不重要; 您可以像删除其他事件处理程序一样删除它。 如果你的问题是绑定版本是它自己的唯一函数,你可以跟踪绑定的版本,或者使用不带特定处理程序的removeEventListener签名(尽pipe当然会删除相同的事件处理程序types)。

(注意, addEventListener在所有的浏览器中都不起作用;你应该使用像jQuery这样的库来以跨浏览器的方式为你做事件连接,另外,jQuery有名称空间事件的概念,允许你绑定到“click.foo”;当你想删除事件,你可以告诉jQuery“删除所有foo事件”,而不必知道具体的处理程序或删除其他处理程序。

这是解决scheme:

 var o = { list: [1, 2, 3, 4], add: function () { var b = document.getElementsByTagName('body')[0]; b.addEventListener('click', this._onClick()); }, remove: function () { var b = document.getElementsByTagName('body')[0]; b.removeEventListener('click', this._onClick()); }, _onClick: function () { this.clickFn = this.clickFn || this._showLog.bind(this); return this.clickFn; }, _showLog: function (e) { console.log('click', this.list, e); } }; // Example to test the solution o.add(); setTimeout(function () { console.log('setTimeout'); o.remove(); }, 5000); 

如果你想使用'onclick',如上所示,你可以试试这个:

 (function(){ var singleton = {}; singleton = new function() { this.myButton = document.getElementById("myButtonID"); this.myButton.onclick = function() { singleton.clickListener(); }; } singleton.clickListener = function() { console.log(this); // I also know who I am }; // public function singleton.disableButton = function() { this.myButton.onclick = ""; }; })(); 

我希望它有帮助。

现在是2016年,DOM标准在解决我们偶尔碰到的一个很常见的问题方面没有多大帮助。</ rant>

是的,删除有界事件处理程序的唯一方法是保留对有界函数的引用,并在removeEventListener上使用它,如其他解决scheme中所述。

然而,当你有很多听众,它会变得混乱。 没有人提出简单的函数来抽象出不得不引用有界函数的工作。 我想出了两个名为on()和off()(jQuery启发的名字)的函数,我将它们添加到原型中,添加到所有HTMLElements中。 代码在这里 。 (因为它使用WeakMap,所以只能在IE 11+上运行)

所以使用它,你可以添加事件监听器,并像这样删除它们:

 this.myButton.on('click', this.clickListener, this); this.myButton.off('click', this.clickListener, this); //yup, it's removed 

实施的细节和决定很多,所以我不会解释它:)

如果您不喜欢将函数添加到本机对象,那么您可以通过编辑我的代码来实现这一点。 (但是,严格地说,DOM标准应该为我们添加一些API来解决这个问题。

已经有一段时间了,但MDN对此有一个超级解释。 这帮助我比这里的东西更多。

MDN :: EventTarget.addEventListener – 处理程序中的“this”的值

它为handleEvent函数提供了一个很好的select。

这是一个有和没有绑定的例子:

 var Something = function(element) { this.name = 'Something Good'; this.onclick1 = function(event) { console.log(this.name); // undefined, as this is the element }; this.onclick2 = function(event) { console.log(this.name); // 'Something Good', as this is the binded Something object }; element.addEventListener('click', this.onclick1, false); element.addEventListener('click', this.onclick2.bind(this), false); // Trick } 

上面的例子中的一个问题是,你不能通过绑定来移除监听器。 另一个解决scheme是使用一个名为handleEvent的特殊函数来捕获任何事件: