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

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

JavaScript では、同じイベント ハンドラーの定義内でイベント リスナーを削除すると問題が発生する可能性があります。これに対処するには、次の戦略を検討してください。

名前付き関数の使用

1 つのアプローチには、名前付き関数の使用が含まれます。

var click_count = 0;

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

// to add
canvas.addEventListener('click', myClick);

間接イベント処理によるクロージャ

あるいは、間接的なイベント処理を使用してクリックカウンターを閉じることもできます。パターン:

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

// to add
canvas.addEventListener('click', myClick);

ファンクション ジェネレーターの使用

各要素に独自のカウンターが必要な場合は、ファンクション ジェネレーターを使用できます:

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

// to add
canvas.addEventListener('click', myClick(0));

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