刪除事件監聽器

Question

我有一個canvas元素，可以在其中使用WebGL進行繪制。
根據繪制的內容，我要添加一個事件偵聽器。

現在，當我重新繪制畫布時，我想刪除舊的事件偵聽器並添加一個新的事件偵聽器。

簡單地這樣做是行不通的：

canvas.removeEventListener("click", function(event){ 
                                        colorbarClicked(event, viewdata); 
                                    }, false);
canvas.addEventListener("click", function(event){ 
                                      colorbarClicked(event, viewdata); 
                                 }, false);

我認為這是因為colorbarClicked函數已經更改（也許是因為其參數具有不同的值？）並且與我想刪除的舊函數不匹配。

所以我的問題是，每次重繪事件偵聽器時，都會添加該事件偵聽器，因此將其加倍。 但是colorbarClicked函數取決於在畫布上繪制的內容，因此我絕對需要對其進行更改。

Answer 1

您需要記住添加時使用的功能，並在刪除時再次使用相同的功能：

// Somewhere *outside* the code doing the adding/removing (in containing code)
var listener = null;

// In the code adding/removing
if (listener) {
    canvas.removeEventListener("click", listener, false);
}
listener = function(event){ colorbarClicked(event, viewdata); };
canvas.addEventListener("click", listener, false);

---

旁注：每次添加和刪除處理程序似乎很尷尬。 通常，您只需要添加一次處理程序，並使其響應您所做的任何更改。

Answer 2

您可以使用命名函數。 請看下面的例子：

 function foo(){ alert("this comes only once"); this.removeEventListener('click', foo); } dude.addEventListener('click', foo); 

 <button id="dude">Click Me</button> 

這里發生的是函數foo是在全局范圍內定義的。 它具有自己的唯一標識。 該函數的基本作用是創建警報，然后將其從按鈕的click事件中刪除。 因此，當您單擊它時，偵聽器將被刪除，因此您將不再看到它。

您的代碼無法按預期工作，因為您作為回調傳遞給addEventListener的函數沒有唯一標識，並且Javascript不知道要刪除什么。

此方法還可以防止回調地獄:)