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

JavaScript でのイベント リスナーの削除

JavaScript では、ユーザー インタラクションに応答するためにイベント リスナーが一般的に使用されます。ただし、さまざまな理由でこれらのリスナーを削除する必要がある場合があります。

問題:

イベント リスナーをイベント リスナーの定義内から削除したいと考えています。リスナーそのもの。ただし、リスナー内で 'this' を使用しようとするとエラーが発生します。

解決策 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);

このソリューションでは、「click_count」変数がリスナーの外部で定義され、関数内での可視性が確保されています。また、「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);

このアプローチでは、「click_count」変数の周囲にクロージャが作成されます。 「ハンドラー」関数はカウンターをインクリメントし、必要に応じてイベント リスナーを削除します。

解決策 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 with a unique click counter for each element
canvas.addEventListener('click', myClick(0));

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