Javascript删除“焦点”事件监听器答案

【问题标题】：Javascript remove 'focus' event listenerJavascript删除“焦点”事件监听器
【发布时间】：2019-08-26 02:38:49
【问题描述】：

我想使用纯 javascript 从元素中删除“焦点”事件侦听器，但无法正常工作

document.getElementById("txttaskdateDeploy").removeEventListener("focus", function(e){});

但在 jquery 下工作

$("#txttaskdateDeploy").unbind("focus");

谁能说出为什么它不能在普通的javascript中工作

【问题讨论】：

How do you clear the focus in javascript?的可能重复
当你应该传递一个现有的监听器时，你正在创建一个新函数。 function(e){} 创建了一个以前不是监听器的新函数。
@ArnabRoy — 不。问题是关于移除焦点事件监听器而不是焦点本身。

标签： javascript

【解决方案1】：

您传递给removeEventListener 的第二个参数必须是您要删除的函数。

那里有一个函数表达式，所以它将创建一个全新的函数。由于是新函数，无法匹配任何现有的事件监听器，所以不会被移除。

这可以工作：

const x = function (e) { console.log(1); };
foo.addEventListener("focus", x);
foo.removeEventListener("focus", x);

但这不会（两个不同但相同的功能不是同一个功能）：

foo.addEventListener("focus", function (e) { console.log(1); });
foo.removeEventListener("focus", function (e) { console.log(1); });

【讨论】：

【解决方案2】：

您需要将要删除的特定事件侦听器传递给removeEventListener 方法，而不是只传递一个空函数。

应该如何做的一个例子是：

const listener = function(e) {
  console.log('focused!'); // do anything here
} 

// Add event listener 
document.getElementById("txttaskdateDeploy").addEventListener("focus", listener);

// When you want to remove the event listener 
document.getElementById("txttaskdateDeploy").removeEventListener("focus", listener);

【讨论】：