从 addEventListener 中提取函数

Question

简而言之，我有 3 个 div，点击时它们的背景颜色会随机改变。它们只能单击一次，因此是 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 之外创建该处理函数？我试图将它保存到一个 const，然后在 eventListener 中使用该 const，但它似乎不起作用

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 }
  );
}