addEventListener() に渡すコールバック関数内で、自分自身を removeEventListener() する

このページの目的

addEventListener() に渡すコールバック関数内で、自分自身を removeEventListener() するテスト。

コード例

addEventListener() と removeEventListener() に同じコールバック関数を渡す必要があるので、名前付きの関数を事前に作成して使ってもよいが、以下のようにすると事前に関数を作成しておく必要がなくスマートである。

window.addEventListener('DOMContentLoaded', (event) => {
  //console.log('DOM fully loaded and parsed');

  document.querySelector('#btn1').addEventListener('click', function fn() {
    // fn という名前はこのスコープでしか参照できない

    // do something

    // function を使っているので、this にはイベント対象オブジェクトが束縛されている
    this.removeEventListener('click', fn);
  });
});

ポイントは、addEventListener() に function fn() {} を渡しているところ。
こうすれば、removeEventListener() の第2引数に関数名を指定することができる。
fn という名前は何でもよいのだが、ここで付けた名前はここから外側のスコープからは参照できないので安全である。

デモ

メッセージはブラウザのコンソールに出力される。
イベントリスナー内で、自分自身を削除しているので、なのでメッセージは1度しか実行されない。

参考