从addEventListener中提取函数

Question

简而言之，我有3个div，它们的bg颜色在单击时会随机更改。它们只能单击一次，因此removeEventListener。我只是想把事情复杂化吗？

我有3个事件侦听器，它们都使用相同的函数，但每个都有自己的参数：

doorLeft.addEventListener("click", function handler(ev) {
randomChooseColour(doorLeft);
ev.currentTarget.removeEventListener(ev.type, handler);
});
doorMiddle.addEventListener("click", function handler(ev) {
randomChooseColour(doorMiddle);
ev.currentTarget.removeEventListener(ev.type, handler);
});
doorRight.addEventListener("click", function handler(ev) {
randomChooseColour(doorRight);
ev.currentTarget.removeEventListener(ev.type, handler);
});

randomChooseColour是一个基本函数，它接受一个参数并更改div背景颜色

const randomChooseColour = (door) => {
if (randomSelect(2) === 0) {
door.style.backgroundColor = winColour;
} else {
door.style.backgroundColor = loseColour;
}
};

有什么方法可以在addEventListener之外创建该处理程序函数吗？我试图将其保存为常量，然后在eventListener中使用该常量，但似乎不起作用

const choose = function handler(ev, door) {
randomChooseColour(door);
ev.currentTarget.removeEventListener(ev.type, handler);
};

然后像这样使用它，但ev没有定义。

doorLeft.addEventListener("click", choose(ev, doorLeft));

Answer 1

由于函数的主体不同，我认为没有一种方法可以调用removeEventListener的单个外部函数。但有一种简单的方法可以简化事情：使用{ once: true }，这样侦听器只能被调用一次，根本不需要removeEventListener。

// the below line can be made less repetitive
// by using querySelectorAll instead, if possible
for (const door of [doorLeft, doorMiddle, doorRight]) {
door.addEventListener(
'click',
() => randomChooseColor(door),
{ once: true }
);
}