如何删除从各个元素动态创建的事件侦听器？

Question

试图从 keydown 和 click 事件中删除事件侦听器，但我的代码似乎无法正常工作。不确定问题出在哪里； JS 的新手并试图解决它。我需要将 removeEventListeners 移到函数外吗？

const togglePopupAlt = () => {
    const popupList = Array.from(document.querySelectorAll(".popup"));
    popupList.forEach((modal) => {
        modal.addEventListener("click", (evt) => {
        togglePopup(evt.target);
        });
    });
    popupList.forEach((modal) => {
        modal.removeEventListener("click", (evt) => {
        togglePopup(evt.target);
        });
    });

    popupList.forEach(() => {
        
        document.addEventListener("keydown", (evt) =>{
            const escKey = 27;
            if (evt.keyCode === escKey){
                togglePopup(document.querySelector(".popup_active"));
            }
        });
        document.removeEventListener("keydown", (evt) =>{
            const escKey = 27;
            if (evt.keyCode === escKey){
                togglePopup(document.querySelector(".popup_active"));
            }
        });
   });
}

togglePopupAlt();

Answer 1

删除事件侦听器时，必须传递对设置为处理程序的函数的引用，因此不能删除作为匿名函数添加的事件侦听器。只能删除命名函数。

function handler(){
  console.log("Handled!");
}

document.querySelector("button").addEventListener("click", handler);

document.getElementById("remove").addEventListener("click", function(){
  document.querySelector("button").removeEventListener("click", handler);
});

<button>Click Me</button>

<button id="remove">Remove Handler</button>

Answer 2

您需要在 removeEventListener 中传递与在 addEventListener

中相同的处理程序

const handler = () => doSomeThing()

element.addEventListener("click", handler)

// Then remove them like this.
element.removeEventListener("click", handler)

由于每次循环都会创建一个新函数，因此将这些处理程序存储在一个数组中，并在 removeListener 中为每个元素使用相同的处理程序。

由于处理程序的逻辑对于所有元素都是相同的，您可以这样做：

const modalHandler = (evt) => {
  togglePopup(evt.target);
};

const keyDownHandler = (evt) => {
  const escKey = 27;
  if (evt.keyCode === escKey) {
    togglePopup(document.querySelector(".popup_active"));
  }
};

const togglePopupAlt = () => {
  const popupList = Array.from(document.querySelectorAll(".popup"));
  popupList.forEach((modal) => {
    modal.addEventListener("click", modalHandler);
  });
  popupList.forEach((modal) => {
    modal.removeEventListener("click", modalHandler);
  });

  popupList.forEach(() => {
    document.addEventListener("keydown", keyDownHandler);
    document.removeEventListener("keydown", keyDownHandler);
  });
};

togglePopupAlt();

如何删除从各个元素动态创建的事件侦听器？

How to remove event listeners created dynamically from respective elemets?

javascript

removeeventlistener