如何使用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>