如何使用Javascript从具有多个功能的单击事件侦听器中删除单个功能？

Question

使用 Javascript，当在具有“click”事件侦听器的元素上使用多个函数时，在第一个单击事件之后，如何从“单击”事件侦听器中删除单个函数？ 在这里，第一次点击后，只toggleView()应保持和renderList()应该被删除。

const button = document.getElementById("view_button");
button.addEventListener("click", () => {
  toggleView(); // want to keep this indefinitely
  renderList(); // want to remove this after the first click
  button.removeEventListener("click", renderList);
});

Answer 1

您需要分别添加两者，并在第一次执行后要删除的那个上指定{ once: true } 。

见MDN ：

once
一个布尔值，指示添加后最多应调用一次侦听器。 如果为 true，则在调用时会自动删除侦听器。

 function toggleView() { console.log('toggleView'); } function renderList(evt) { console.log('renderList'); } const button = document.getElementById("view_button"); button.addEventListener("click", toggleView); button.addEventListener("click", renderList, { once: true });

 <button type="button" id="view_button">Click</button>

Answer 2

您可以添加两个事件侦听器并删除一个

 function toggleView() { console.log('toggleView'); } function renderList(evt) { evt.currentTarget.removeEventListener("click", renderList); console.log('renderList'); } const button = document.getElementById("view_button"); button.addEventListener("click", toggleView); button.addEventListener("click", renderList);

 <button type="button" id="view_button">Click</button>

或者您可以添加逻辑来确定是否应该运行该函数。

 function toggleView() { console.log('toggleView'); } function renderList() { console.log('renderList'); } const button = document.getElementById("view_button"); button.addEventListener("click", () => { toggleView(); if (!button.dataset.clicked) { renderList(); button.dataset.clicked = '1'; } });

 <button type="button" id="view_button">Click</button>

Answer 3

我会在这里使用闭包来跟踪项目是否被点击。

 const button = document.getElementById("view_button"); function toggleView() { console.log('Toggle View'); } function renderList() { console.log('Render List'); } function clickHandler() { let hasBeenClicked = false; return function () { toggleView(); if (!hasBeenClicked) { renderList(); hasBeenClicked = true; } }; } button.addEventListener("click", clickHandler());

 <button id="view_button" type="button">View Button</button>