![](/img/trans.png)
[英]removeEventListener is not working (function is not anonymous, exactly the same as addEventListener!!)
[英]How to removeEventListener that is addEventListener with anonymous function?
function doSomethingWith(param)
{
document.body.addEventListener(
'scroll',
function()
{
document.write(param);
},
false
); // An event that I want to remove later
}
setTimeout(
function()
{
document.body.removeEventListener('scroll', HANDLER ,false);
// What HANDLER should I specify to remove the anonymous handler above?
},
3000
);
doSomethingWith('Test. ');
你不能 您必須使用命名函數或以某種方式存儲引用。
var handler;
function doSomethingWith(param) {
handler = function(){
document.write(param);
};
document.body.addEventListener('scroll', handler,false);
}
setTimeout(function() {
document.body.removeEventListener('scroll', handler ,false);
}, 3000);
最好是以結構化的方式執行此操作,以便您可以標識不同的處理程序並將其刪除。 在上面的示例中,您顯然只能刪除最后一個處理程序。
更新:
您可以創建自己的處理程序處理程序(:)):
var Handler = (function(){
var i = 1,
listeners = {};
return {
addListener: function(element, event, handler, capture) {
element.addEventListener(event, handler, capture);
listeners[i] = {element: element,
event: event,
handler: handler,
capture: capture};
return i++;
},
removeListener: function(id) {
if(id in listeners) {
var h = listeners[id];
h.element.removeEventListener(h.event, h.handler, h.capture);
delete listeners[id];
}
}
};
}());
然后,您可以將其用於:
function doSomethingWith(param) {
return Handler.addListener(document.body, 'scroll', function() {
document.write(param);
}, false);
}
var handler = doSomethingWith('Test. ');
setTimeout(function() {
Handler.removeListener(handler);
}, 3000);
不能,您需要對函數的引用:
function doSomethingWith(param) {
var fn = function(){ document.write(param); };
document.body.addEventListener('scroll', fn, false);
setTimeout(function(){ document.body.removeEventListener('scroll', fn, false); }, 3000);
}
doSomethingWith('Test. ');
您也可以這樣做:
const ownAddEventListener = (scope, type, handler, capture) => {
scope.addEventListener(type, handler, capture);
return () => {
scope.removeEventListener(type, handler, capture);
}
}
然后,您可以像這樣刪除事件監聽器:
// Add event listener
const disposer = ownAddEventListener(document.body, 'scroll', () => {
// do something
}, false);
// Remove event listener
disposer();
如果您不必支持IE,則可以使用一次選項
[Element].addEventListener('click', () => {...}, {
capture: false,
once: true
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.