如何从具有多个函数的点击事件监听器中删除单个函数，使用Javascript?

Question

使用Javascript，如何从"click"事件监听器，在第一次click事件之后，当在带有"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>