如何移除事件监听器？

Question

以下是我的事件监听器代码：

window.addEventListener("beforeunload", function (e) {
        if(sessionStorage.token != "abide" )  {
          // call api
        }
});

如果我想删除这个事件监听器，我该怎么做？

代码是否像下面这样工作？

window.removeEventListener("before unload");

- Dreams

---

尝试使用以下代码取消注册 "beforeunload" 事件监听器：window.removeEventListener("beforeunload");您的代码中多余了空格。 - Dhara Parmar

window.removeEventListener("beforeunload") 将会起作用。 - brk

我相信你也需要将你的函数作为其中一个参数进行引用。 - aquaflamingo

我刚刚尝试使用window.removeEventListener("beforeunload")，但它没有起作用。 - Dreams

Answer 1

为了移除事件监听器，你的事件处理函数必须是一个外部命名函数，而不是匿名函数（你需要对该函数有一个引用）：

window.addEventListener("beforeunload", functionToRun);

function functionToRun(e){
     if(sessionStorage.token != "abide" ){
        // call api
     }
}
window.removeEventListener("beforeunload",functionToRun);

---

替代方案：您也可以在匿名函数调用内使用 arguments.callee 来删除它，该方法引用了该匿名函数。
示例代码：

var button=document.getElementById('button');

button.addEventListener('click',function(e){

   //some code to be runned       
  this.removeEventListener('click', arguments.callee);

});

注意: 你的事件处理函数必须被触发一次，才能以上述方式移除它。

var button = document.getElementById('button');

button.addEventListener('click', function(e) {

  alert('clicked');

  this.removeEventListener('click', arguments.callee);
});

<button id="button">click</button>

- The Process

---

它必须是一个命名函数吗？你不能只保留对匿名函数的引用吗？ - Quentin

已确认 - https://jsfiddle.net/mv9cf7tL/ - 函数不必命名。（尽管最好还是避免使用匿名函数）。 - Quentin

此外，我认为您没有正确使用代码示例突出显示功能。“事件侦听器”和“事件处理函数”并不是真正的代码。 - Andrea Casaccia

请注意，在严格模式下，arguments.callee 不起作用。最好给该函数命名。 - Felix Kling

这对我来说不起作用 - AuWiMo

这对我来说不起作用 - undefined