レッスンに戻る

どのようなハンドラが実行されますか?

importance: 5

変数内にボタンがあります。これにはハンドラはありません。

次のコードを実行後、クリックイベントのどのハンドラが実行されますか? 表示されるアラートはどれですか?

button.addEventListener("click", () => alert("1"));

button.removeEventListener("click", () => alert("1"));

button.onclick = () => alert(2);

正解: 12

最初のハンドラはトリガーされます。これは removeEventListener によって削除されないからです。ハンドラを削除するには、正確に割り当てられた関数を渡す必要があります。コードでは、新しい関数が渡されますが、見た目は同じですが、別個の関数です。

関数オブジェクトを削除するには、次のようにして参照を格納する必要があります

function handler() {
  alert(1);
}

button.addEventListener("click", handler);
button.removeEventListener("click", handler);

ハンドラ button.onclick は、addEventListener とは独立して動作します。