removeEventListenerが思ったように動作しない

Question

HTML + JavaScriptで、window.addEventListenerで追加したkeydownリスナーを取り除きたいと思い、removeEventListenerで取り除こうと思ったのですが、想像していた動作をしません。コードは次の通りです。

window.onload = () => {
  window.addEventListener("keydown", onKeyDown.bind(this), false);
}
function onKeyDown(event) {
  if (event.key === "Enter") { // Enterを押すと改行する
    document.getElementById("hogehoge").innerHTML += "</br>";
  } else if (event.key === "Backspace") { // Backspaceを押すとキー入力が効かなくなる
    window.removeEventListener("keydown", onKeyDown.bind(event), false);
  } else { // それ以外はキー名が出力される
    document.getElementById("hogehoge").innerHTML += event.key;
  }
}

実行してみると、Backspaceを押しても、キー入力に反応があるのでリスナーが取り除けていませんでした。JavaScriptのbindとthisの理解が怪しいので、その当たりではないかと考えているのですが、バグの原因を理解できませんでした。keydownリスナーの取り除き方を教えていただけると幸いです。

Answer 1

removeEventListenerは、addEventListenerしたのと同じ関数オブジェクトを渡す必要があります。bindを行うと、行った度に（動作は同じでも）別の関数オブジェクトを生成しますので、正しくremoveできません。

…というより、イベントハンドラ内でthisを使っていないので、thisを固定するための操作であるbindは無意味です。削りましょう。

window.onload = () => {
  window.addEventListener("keydown", onKeyDown, false);
}
function onKeyDown(event) {
  if (event.key === "Enter") { // Enterを押すと改行する
    document.getElementById("hogehoge").innerHTML += "</br>";
  } else if (event.key === "Backspace") { // Backspaceを押すとキー入力が効かなくなる
    window.removeEventListener("keydown", onKeyDown, false);
  } else { // それ以外はキー名が出力される
    document.getElementById("hogehoge").innerHTML += event.key;
  }
}

Comments

[Paalon]

なるほどよく分かりました。bindとthisの理解が足りないみたいなのでもう一度見なおしてきます。ありがとうございました。