如何刪除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/