当事件处理程序是原型函数时,如何使用removeEventListener? [英] How to use removeEventListener when event handler is a prototype function?
问题描述
This is a follow-up to this question. The problem is that my call to removeEventListener
does not work. What do I have to change below so that it does work?
我的自定义对象:
//Custom Editor Example with event listeners
var CE = function (id) {
'use strict';
// assume not a valid object
this.isValid = false;
this.element = document.getElementById(id);
if (this.element !== null) {
this.id = id;
this.init();
this.isValid = true;
}
};
CE.prototype.addEvent = function (event, callback, caller) {
'use strict';
// check for modern browsers first
if (typeof window.addEventListener === 'function') {
return caller.element.addEventListener(event, function (e) {callback.call(caller, e); }, false);
}
// then for older versions of IE
return this.element.attachEvent('on' + event, function (e) {callback.call(caller, window.event); });
};
CE.prototype.init = function () {
'use strict';
this.addEvent('keydown', this.onCustomKeyDown, this);
// add other event listeners
};
这就是我要删除事件处理程序的方式:
This is how I'm trying to remove the event handler:
CE.prototype.removeEvent = function (event, callback, caller) {
'use strict';
caller.element.removeEventListener(event, callback, false);
};
CE.prototype.destroy = function () {
'use strict';
this.removeEvent('keydown', this.onCustomKeyDown, this);
// remove other event listeners
};
这是处理事件的原型函数的签名.
And this is the signature of the prototype function that handles the event.
CE.prototype.onCustomKeyDown = function onCustomKeyDown(e) {
如果我理解正确,则removeEventListener不能用于删除作为匿名函数的事件处理程序.这是这里的问题吗?我需要更改呼叫addEventListener
的方式吗?
If I understand correctly, removeEventListener cannot be used to remove event handlers which are anonymous functions. Is that the issue here? Do I need to change the way I'm calling addEventListener
?
推荐答案
如果我理解正确,则removeEventListener不能用于删除作为匿名函数的事件处理程序.这是这里的问题吗?
If I understand correctly, removeEventListener cannot be used to remove event handlers which are anonymous functions. Is that the issue here?
是的.添加的函数是匿名函数表达式,而不是callback
,因此用callback
调用removeEventListener
无效.
Yes. The function that is added is the anonymous function expression, not callback
, so calling removeEventListener
with callback
will not work.
我需要更改调用addEventListener的方式吗?
Do I need to change the way I'm calling addEventListener?
是的,您需要以某种方式保留对实际处理程序函数的引用,以便以后可以将其传递给removeEventListener
.基本上有两种方法可以做到这一点:
Yes, you somehow need to retain a reference to the actual handler function so that you can pass it to removeEventListener
later. There are basically two ways to do this:
- 使用闭包并从
addEvent
返回remover
函数,该函数将取消订阅. - 将对事件处理程序的引用存储在某个地方,以便您可以在调用
removeEvent
方法时通过回调识别它,并确保它不会泄漏.
- use a closure and return a
remover
function fromaddEvent
that will cancel the subscription. - store a reference to the event handler somewhere so that you can identify it by the callback when
removeEvent
method is called - and make sure that it doesn't leak.
这篇关于当事件处理程序是原型函数时,如何使用removeEventListener?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!