JavaScriptでのイベントの削除

このレッスンでは、以前に要素にバインドした イベントハンドラを削除する方法を学びます。 例として、次のボタンが与えられているとします：

html<input id="button" type="submit">

このボタンに関数 func をバインドしましょう：

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
}

次に、イベントハンドラが最初のクリックでトリガーされ、 その後ボタンから削除されるようにしてみましょう。 このために、特別なメソッド removeEventListener が存在します。 このメソッドは、最初のパラメータとしてイベントタイプを受け取り、 2番目のパラメータとして削除する必要がある関数への参照を受け取ります。

一般的に、これはイベントハンドラがバインドされたのと同じ方法で 削除されることを意味します。 つまり、このようにバインドした場合：addEventListener('click', func)、同じパラメータで削除します、 このように：removeEventListener('click', func)。

では、設定したタスクを解決しましょう：

javascriptlet button = document.querySelector('#button');
button.addEventListener('click', func);

function func() {
  console.log('!!!');
  this.removeEventListener('click', func);
}