javascript刪除事件監聽器

Question

以下是否在銷毀元素之前實際刪除了該事件？ 我無法在DOM檢查器中弄清楚附加了哪些函數以及在運行以下代碼后是否將其刪除：

el.addEventListener('click', function attachFunction (a, b) {
    console.log(a);
    console.log(b);
}, false);

el.removeEventListener('click', attachFunction, false);

Answer 1

不，就目前而言，您的代碼將無效

注意：要刪除事件處理程序，使用addEventListener（）方法指定的函數必須是外部函數。

^{W3Schools w3fools - （對不起，但有時w3fools確實提供你想要的）}

所以，你需要這樣做：

function attachFunction(a, b){
  console.log(a);
  console.log(b);
}

el.addEventListener('click', attachFunction, false);

el.removeEventListener('click', attachFunction, false);

這將按預期工作。

如果要將某些參數傳遞給函數attachFunction ，則需要使用另一個函數：

function attachFunction(a, b){
  console.log(a);
  console.log(b);
}

function linkFunction(){
  attachFunction(a, b); // a and b can be replaced with anything you want
}

el.addEventListener('click', linkFunction, false);

el.removeEventListener('click', linkFunction, false);

Answer 2

如果您希望能夠刪除使用addEventListener添加的事件偵聽器，請在addEventListener()調用外部定義它：

function attachFunction (a, b) {
    console.log(a);
    console.log(b);
}

然后：

el.addEventListener("click", attachFunction);

然后你的.removeEventListener()可以工作。

Answer 3

語法function foo(whatever)在運行時之前進行了評估，因此我不認為您的代碼是有效的語法或具有預期的行為。 你應該更好地使用這樣的匿名函數：

var attachFunction = function(a, b) {
    console.log(a);
    console.log(b);
}
el.addEventListener('click', attachFunction, false);
el.removeEventListener('click', attachFunction, false);

還請注意，事件偵聽器（此處為attachFunction ）只能有一個參數，即事件對象。

Answer 4

function關鍵字可以使用兩種方式：作為函數語句或表達式 。 這里討論了不同之處 ，但我將嘗試涵蓋相關部分。

當用作語句（如下所示）時，函數名稱將在語句的周圍范圍內有效：

function hi(){ 
    console.log(typeof hi); // "function"
}
console.log(typeof hi); // "function"

但是當用作表達式時，函數名稱僅在函數體中有效：

var greetings = function hi(){ 
    console.log(typeof hi); // "function"
}
console.log(typeof hi); // "undefined"
console.log(typeof greetings); // "undefined

因此，您的初始示例的范圍問題是，因為您將其用作表達式，所以當您嘗試取消綁定時，名稱attachFunction將是未定義的。

（我認為你對參數如何傳遞給事件處理程序也有一些困惑，但這是一個單獨的問題。）