独自の定義内から JavaScript イベント リスナーを削除するにはどうすればよいですか?

定義内の JavaScript イベント リスナーの削除

JavaScript でイベント リスナーを操作する場合、リスナーを削除する必要があるシナリオが存在する場合があります。別のリスナーの定義内から。この状況は、特定のクリック数に達するなど、特定の条件が満たされたときに発生する可能性があります。

解決策:

独自の定義内でイベント リスナーを削除するには、次のようにします。名前付き関数を利用できます。匿名関数を addEventListener() メソッドに割り当てる代わりに、名前付き関数を作成し、それを 2 番目の引数として渡します。

var click_count = 0;

function myClick(event) {
  click_count++;
  if (click_count == 50) {
    canvas.removeEventListener('click', myClick);
  }
}

canvas.addEventListener('click', myClick);

この例では、myClick は addEventListener() メソッドに割り当てられた名前付き関数です。 。 click イベントがトリガーされると、myClick 関数は click_count 変数をインクリメントします。カウントが 50 に達すると、removeEventListener() を使用してリスナーが削除されます。

代替アプローチ:

匿名関数を使用する必要がある場合、またはクリック カウンタの周りを閉じる必要がある場合変数を使用してクロージャを作成できます。クロージャーを使用すると、外部関数の実行が終了した後でも、内部関数が外部スコープから変数にアクセスできるようになります。

var myClick = (function(click_count) {
  var handler = function(event) {
    click_count++;
    if (click_count == 50) {
      canvas.removeEventListener('click', handler);
    }
  };
  return handler;
})(0);

canvas.addEventListener('click', myClick);

ここで、myClick 関数は、ハンドラー関数と click_count 変数をカプセル化する内部クロージャーを作成します。 .

複数のリスナー:

必要な場合独自のカウンターを持つ複数のリスナーを追加すると、独自のカウンターを持つ新しい関数を生成する高階関数を作成できます。

var myClick = function(click_count) {
  var handler = function(event) {
    click_count++;
    if (click_count == 50) {
      canvas.removeEventListener('click', handler);
    }
  };
  return handler;
};

canvas.addEventListener('click', myClick(0));

以上が独自の定義内から JavaScript イベント リスナーを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。