どのようなハンドラが実行されますか?
importance: 5
変数内にボタンがあります。これにはハンドラはありません。
次のコードを実行後、クリックイベントのどのハンドラが実行されますか? 表示されるアラートはどれですか?
button.addEventListener("click", () => alert("1"));
button.removeEventListener("click", () => alert("1"));
button.onclick = () => alert(2);
正解: 1
と 2
。
最初のハンドラはトリガーされます。これは removeEventListener
によって削除されないからです。ハンドラを削除するには、正確に割り当てられた関数を渡す必要があります。コードでは、新しい関数が渡されますが、見た目は同じですが、別個の関数です。
関数オブジェクトを削除するには、次のようにして参照を格納する必要があります
function handler() {
alert(1);
}
button.addEventListener("click", handler);
button.removeEventListener("click", handler);
ハンドラ button.onclick
は、addEventListener
とは独立して動作します。