移除元素内的事件监听器答案

【问题标题】：Remove event listener inside an element移除元素内的事件监听器
【发布时间】：2021-11-21 13:06:36
【问题描述】：

检查代码...

document.querySelectorAll("button").forEach((element) => {

  element.addEventListener("keypress", respondToClick);
  function respondToClick() {
    console.log("Key Pressed");
    console.log(element);
  }

});

/*
'I don't know where to put...'

// RemoveEventListener
const removeEvent = () => {
  element.removeEventListener("click", respondToClick);
};

*/


// On HTML file
<button onclick="removeEvent();" class="numbers">RemoveEventListener</button>;

我可以添加 removeEventListner 按钮来删除元素内的 eventListner 吗？

【问题讨论】：

您可以添加一个具有指针事件的css类：无；到那个元素

标签： javascript dom-events addeventlistener event-listener removeeventlistener

【解决方案1】：

你可以在没有内联 JS 的情况下这样做（更多信息在 why to not do it）

这里有更多关于 MDN 上 removeEventListener 的信息

function respondToClick(event) {
  const element = event.target;
  console.log("Key Pressed:", event.key);
  console.log(element);
}

function removeEvent(event) {
  const element = event.target;
  element.removeEventListener("keypress", respondToClick)
}

document.querySelectorAll("button").forEach((element) => {
  element.addEventListener('keypress', respondToClick);
  element.onclick = removeEvent;
});

&lt;button&gt;removeEventListener&lt;/button&gt;

【讨论】：