JavaScript：从该侦听器中删除事件侦听器？

Question

我一直想知道这种方法有多干净——从那个监听器中删除一个事件监听器。

更新：

在内部，我保留了对象和侦听器的散列，因此我可以从任何地方删除事件侦听器。 我只是关心将其从内部移除。 这样的行动真的有用吗？

更新

我问的是关于 addEventListener、removeEventListener 的事情。

Answer 1

您可以传递once选项让侦听器只执行一次，然后自行删除。 文档： https ://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters

例子：

  element.addEventListener('eventname', (ev) => {
    console.log("event is captured only once.");
    // do more stuff...
  }, { once: true });

从上面的相同文档链接，现代浏览器支持很好，但不适用于 Internet Explorer。

Answer 2

我刚刚看到这个是因为我想知道完全相同的问题！

arguments.callee 是你的朋友......

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee

所以你会有

blah.addEventListener('click',function(e){
    e.source.removeEventListener('click', arguments.callee);
    blee bloo bleep
});

这在 Titanium Appcelerator 中有效，所以它也应该在 javascript 中有效（因为它们是同一个东西有点）

注意不要在这个例子中将()添加到 arguments.callee 的末尾，除非你喜欢看到...... bah dum tish！ .

事实上，如果你不想使用 arguments.callee，这也可能有效（未经测试）：

blah.addEventListener('click', anyThingYouWantHere = function(e){
    e.source.removeEventListener('click', anyThingYouWantHere);
    blee bloo bleep
});

其中“anythingYouWantHere”是您想要的任何变量名称〜您在添加函数时实际上是在“命名”该函数。

Answer 3

我刚刚制作了一个包装函数，它生成一个自毁事件监听器：

let addSelfDestructingEventListener = (element, eventType, callback) => {
    let handler = () => {
        callback();
        element.removeEventListener(eventType, handler);
    };
    element.addEventListener(eventType, handler);
};

到目前为止效果很好:)

Answer 4

@bharal 的回答现在给了我这个解决方案：

//example
addBlurListener(element, field) {
    const listenToBlur = (e) => {
        e.target.removeEventListener(e.type, listenToBlur);
        //your stuff
    };
    element.addEventListener('blur', listenToBlur);
},

Answer 5

您可以尝试这样的操作，具体取决于它的调用方式：

some_div.onclick = function () {
    ...
    this.onclick = null;
    // or: some_div.onclick = null;
};

还是您关心的事件监听器？ 因为那些有点复杂。

Answer 6

如果你想让监听器只触发一次，你可以使用这段代码：

element.addEventListener('eventname', function callback(){}, { once: true }); 

或者使用 wrapper 做同样的事情：

function addOneTimeEventListener(element, event, callback) {
    const wrapper = e => {
        try {callback(e)} finally {
            element.removeEventListener(event, wrapper);
        };
    }
    element.addEventListener(event, wrapper);
}

// example
addOneTimeEventListener(document.body, 'click', e => {
  console.log('this message only show once.');
});

如果您想决定何时删除监听器：

function addEventListener(element, event, callback) {
    const wrapper = e => {
        callback(e, () => element.removeEventListener(event, wrapper));
    }
    element.addEventListener(event, wrapper);
}

// example
let count = 0;
addEventListener(document.body, 'click', (e, closeListener) => {
  console.log(`click:${++count}`);
  if(count == 3) closeListener();
});

Answer 7

如果您使用 jQuery，您可能会公开一些方便的方法来与事件处理程序进行交互——请参阅 bind()/unbind()、delegate()/undelegate()、one() 和类似的方法。

我对其他框架没有太多经验，但我想它们会提供类似的功能。 如果您根本不使用框架，@sdleihssirhc 有一个可以接受的答案。

编辑：啊，也许你正在寻找更像addEventListener()和removeEventListener()的东西。 同样，框架将为您的交互提供一些便利，并在某些情况下为您省去重新发明轮子的麻烦。