如何删除已作为匿名函数传入的事件侦听器？

Question

在向对象添加事件侦听器时，我必须将参数传递给我的函数，因此，必须像 el.addEventListener("click", (evt) => { someFunc(arg) }) 那样包装它。但是，我无法稍后在我的项目中删除此事件侦听器。当被引用的函数是匿名函数时，如何移除事件监听器？

Answer 1

使用removeEventListener。这要求您保留对您的函数的引用。

var func = (evt) => { someFunc(arg) };
el.addEventListener("click", func);
el.removeEventListener("click", func)

Answer 2

您可以使用removeEventListener 创建一个addOneTimeEventListener 函数，以便以后在整个项目中使用它来处理多种类型的事件：

function addOneTimeEventListener(node, type, callback) {
    node.addEventListener(type, function(evt) {
        evt.target.removeEventListener(evt.type, arguments.callee);
        return callback(evt);
    });
}

比使用它：

addOneTimeEventListener(el, 'click', evt => someFunc(arg));

工作演示：

var addOneTimeEventListener = function(node, type, callback) {
      node.addEventListener(type, function(evt) {
        evt.target.removeEventListener(evt.type, arguments.callee);
        return callback(evt);
      });
    },
    el = document.getElementById('paragraph');

addOneTimeEventListener(el, 'click', evt => console.log('Clicked once!'));

<p id="paragraph">Some text example...</p>