定義内から JavaScript イベントリスナーを効果的に削除するにはどうすればよいですか?-jsチュートリアル-php.cn

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

DDD

リリース： 2024-12-08 19:45:11

オリジナル

525 人が閲覧しました

How to Effectively Remove JavaScript Event Listeners from Within Their Definitions?

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

リスナー定義内のイベントリスナーを削除しようとすると、JavaScript ユーザーは次のような問題に遭遇する可能性があります。コンテキストバインディング。この記事では、この問題を解決し、イベントリスナーを効果的に削除するアプローチを示します。

アプローチ 1: 名前付き関数を使用する

匿名関数の代わりに、名前付き関数を定義して割り当てます。イベントリスナーに。これにより、関数を後で削除するために参照できるようになります。

var click_count = 0;

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

// Add the event listener
canvas.addEventListener('click', myClick);

ログイン後にコピー

アプローチ 2: クリックカウンタ変数によるクロージャ

クロージャにより、リスナー関数が定義された変数にアクセスできるようになります。その範囲外です。この場合、関数内でクリックカウンタ変数をカプセル化します。

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

// Add the event listener
canvas.addEventListener('click', myClick);

ログイン後にコピー

アプローチ 3: 関数の引数としてのクリックカウンタ

異なる要素に独自のクリックカウンタが必要な場合、クリックカウンタを引数として受け取る新しい関数を作成します。

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

// Add the event listener
canvas.addEventListener('click', myClick(0));

ログイン後にコピー

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