JavaScript：实施事件移除器

Question

(New to JavaScript and the idea of closure.)

I am trying to implement a Wordle clone. The code fragment below is where I construct the on-screen keyboard buttons and add event listeners. Just adding eventListener for each button is trivial. But later I have learned that, in my case, removing those event listeners are not that trivial.

My problem is this: if I define const handleMouseClick = processMouseClick(key); inside the loop, then silenceKeyboard() cannot access it; if I define outside, then I cannot add event listener.

What am I supposed to do to reconcile the two?

function processMouseClick(e) {
  return function closure() {
    if (e === "DELETE") {
      backspace();
      document.activeElement.blur(); //important
      return;
    }
    else if (e === "ENTER") {
      processGuess();
      document.activeElement.blur();
      return;
    }
    else {
      submitEnter(e);
      document.activeElement.blur();
      return;
    }
  }
}

function silenceKeyboard() {
  const keyboard = document.getElementById("user-keyboard");
  const buttons = keyboard.childNodes;
  buttons.forEach(button => {
    button.removeEventListener("click", handleMouseClick);
  });
  return;
}


function createKeyboard() {
  const keys = [
    "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "ENTER", "Z", "X", "C", "V", "B", "N", "M", "DELETE",
  ];

  const keyboard = document.getElementById("user-keyboard");

  keys.forEach((key) => {
    const buttonElement = document.createElement("button");
    buttonElement.textContent = key;
    buttonElement.setAttribute("id", key);
    keyboard.append(buttonElement);
    const handleMouseClick = processMouseClick(key);
    buttonElement.addEventListener("click", handleMouseClick);
  });
  return;
}

Answer 1

With minimal modification you can do something like

function silenceKeyboard() {
  const keyboard = document.getElementById("user-keyboard");
  const buttons = keyboard.childNodes;
  buttons.forEach(button => {
    button.removeEventListener("click", button._handleMouseClick);
  });
  return;
}


function createKeyboard() {
  const keys = [
    "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "A", "S", "D", "F", "G", "H", "J", "K", "L", "ENTER", "Z", "X", "C", "V", "B", "N", "M", "DELETE",
  ];

  const keyboard = document.getElementById("user-keyboard");

  keys.forEach((key) => {
    const buttonElement = document.createElement("button");
    buttonElement.textContent = key;
    buttonElement.setAttribute("id", key);
    keyboard.append(buttonElement);
    buttonElement._handleMouseClick = processMouseClick(key);
    buttonElement.addEventListener(
            "click",
            buttonElement._handleMouseClick
    );
  });
  return;
}

But your code can be refactored much better to have a single event listener for all keys.