如何删除JS严格模式下的当前eventListener（没有被调用者）

Question

问题：事件侦听器想要将自己从目标侦听器列表中删除。 侦听器可以是匿名功能和/或dynamicaly生成（闭合或绑定）

这里是一个溶液（不工作在“模式严格”）： （为例为“点击”事件）

function(ev){ 
    // .... some stuff 
    ev.target.removeEventListener("click",arguments.callee); 
} 

但是这不能在ES5严格模式下工作。

问题：还有其他解决方案吗？

Answer 1

只要命名它即使对函数表达式也适用。

… function myListener(ev){ 
    // … some stuff 
    ev.target.removeEventListener("click", myListener); 
} … 

Answer 2

当您通过addEventListener添加事件侦听器时，您可以通过命名函数来完成此操作，以便您有参考。

Answer 3

感谢您的回答评论。

命名函数是使用闭包模式时的一个解决方案，例如。 但不适用于有界函数： 函数名称引用原始函数，而不是有界实例。

一些示例：

function listener(s,ev){ 
    "use strict"; 
    if (ev.target.value == s){ 
    console.log("<bounded> I found " + s+ ", Bye !"); 
    // Doesn't work : listener references original (not bounded) function 
    ev.target.removeEventListener(ev.type, listener); 
    // Who am I ?? ;-) 
    } else { 
    console.log("<bounded> still waiting for " +s + " " + new Date()); 
    } 
} 
window.addEventListener('load', function(){ 
    i = document.querySelector('input'); 
    i.addEventListener("change",listener.bind(i,"abc")); 
    i.addEventListener("change",listener.bind(i,"def")); 
}); 

我写了这个丑陋的解决方法：

function autoRefBind(f, ...args){ 
    var o = {}; 
    o.me = f.bind(o,...args); 
    return o.me; 
} 
function listener(s,ev){ 
    "use strict"; 
    if (ev.target.value == s){ 
    console.log("<bounded> I found " + s+ ", Bye !"); 
    ev.target.removeEventListener(ev.type, this.me); 
    } else { 
    console.log("<bounded> still waiting for " +s + " " + new Date()); 
    } 
} 
window.addEventListener('load', function(){ 
    i = document.querySelector('input'); 
    i.addEventListener("change",autoRefBind(listener,"abc")); 
    i.addEventListener("change",autoRefBind(listener,"def")); 
}); 

但它很丑陋......： '这个' 必须是这个 “愚蠢” 的对象{我：}

Answer 4

事件绑定适用于每个事件名称注册函数（处理程序）实例！

基本上，当你调用addEventListener时，你定义了一个函数地址，当给定的命名事件将被触发时被调用。

由于您使用bind你打破了这种机制，只是因为bind回报新功能（见bind文档）。

但是，从我的理解你的代码，你试图运行你的事件处理程序一次（和自我从事件注册列表中分离）。

如果是这样，为什么不告诉addEventListener只运行一次小时处理程序（请参阅addEventListener文档）？ 这里是一个更简单的代码：

function listener(s,ev){ 
    "use strict"; 
    console.log("executing listener once with ", s) 
} 
window.addEventListener('load', function(){ 
    i = document.querySelector('input'); 
    i.addEventListener("change",listener.bind(i,"abc"), {once:true}); 
    i.addEventListener("change",listener.bind(i,"def"), {once:true}); 
}); 

你可以在这里进行测试：https://jsfiddle.net/rptsrfLz/