JavaScript で独自のイベントハンドラー内からイベントリスナーを削除するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Susan Sarandon

リリース： 2024-12-08 16:55:10

オリジナル

774 人が閲覧しました

How Can I Remove an Event Listener from Within Its Own Event Handler in JavaScript?

イベントハンドラー内のイベントリスナーの削除

独自の定義内からイベントリスナーを削除するソリューションを探しています。ただし、JavaScript のイベント処理メカニズムにより、これは直接実行可能ではありません。

1 つのアプローチは、名前付き関数を使用することです。名前付き関数を作成し、それをイベントハンドラーとして使用すると、後でその関数名を参照してイベントリスナーを削除できます。同時に、click 変数はイベントハンドラーの外側で宣言して、その増分を容易にする必要があります。

var click_count = 0;

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

canvas.addEventListener('click', myClick);

ログイン後にコピー

あるいは、クロージャを利用して click_count 変数をカプセル化する関数を作成することもできます。このアプローチにより、複数の要素にわたってカウンターをインクリメントできます。

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);

ログイン後にコピー

最後に、各要素に独自のカウンターを持たせたい場合は、初期クリック数のパラメーターを受け入れる匿名関数の採用を検討してください。

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 サイトの他の関連記事を参照してください。