在添加任何新事件侦听器之前删除匿名事件侦听器

Remove anonymous event listeners before adding any new ones

本文关键字：事件 侦听器 删除 添加 任何新      更新时间：2023-09-26

>编辑：我需要调用一个函数来获取数据并重新加载页面的内容。但是一旦另一个函数获取了数据(webSql(，就必须调用它。我不能使用 WebSql 回调，因为变量超出了范围。因此，我创建了一个自定义事件，并在第二个函数作用域中添加了一个侦听器。因此，当获取数据时，我在第一个函数作用域中调度事件。现在的问题是，如果页面被重新加载了不止一次，听众将被多次添加，并且所有将被调用，这是我不想要的。

我需要确保只有一个函数在侦听自定义事件。现在正在删除侦听器，一旦它像这样调用：

document.addEventListener("customEvent", function () {
  actualCallBack(var1, var2); // Since I need to pass parameters I need to use callBack within an anonymous function.
  this.removeEventListener("customEvent", arguments.callee, false);
}, false);

但问题是匿名函数只有在首先被调用后才会被删除。听众有可能获得多次添加时间。如何在添加新事件侦听器之前删除事件侦听器？

document.removeEventListener("customEvent");
document.addEventListener(...);
如果使用变量函数代替，

我本可以删除它，但我需要将一些参数传递给回调，所以我需要使用匿名函数。

使用菲利克斯的建议

var setSingletonEventListener = (function(element){
    var handlers = {};
    return function(evtName, func){
        handlers.hasOwnProperty(evtName) && element.removeEventListener(evtName, handlers[evtName]);
        if (func) {
            handlers[evtName] = func;
            element.addEventListener(evtName, func);
        } else {
            delete handlers[evtName];
        }
    };
})(document);
setSingletonEventListener("custom event", function(){
});
//replaces the previous
setSingletonEventListener("custom event", function(){
});
//removes the listener, if any
setSingletonEventListener("custom event");

这是一种方法：

var singletonEventListenerFor = function (element, eventName) {
    var callback = null;
    element.addEventListener(eventName, function () {
        callback && callback();
    });
    return function (set) {
        callback = set;
    };
};

测试：

var event = document.createEvent("Event");
event.initEvent("customEvent", true, true);
var listener = singletonEventListenerFor(document, "customEvent");
var counter = 0;
listener(function () {
    console.log(++counter);
});
// counter === 1
document.dispatchEvent(event);
// Remove the listener
listener();
// This shouldn't increment counter.
document.dispatchEvent(event);
listener(function () {
    console.log(++counter);
});
// counter === 2
document.dispatchEvent(event);
// counter === 3
document.dispatchEvent(event);
console.log('3 === ' + counter);

http://jsfiddle.net/Dogbert/2zUZT/

API 可以通过返回具有 .set(callback) 和.remove()函数的对象来改进，而不是使用单个函数来执行这两项操作，如果您愿意的话。

存储已应用侦听器的位置，并且仅在尚未添加时才添加它。

相关文章：