ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptのremoveEventListener()が機能しないのはなぜですか?

JavaScriptのremoveEventListener()が機能しないのはなぜですか?

Susan Sarandon
リリース: 2024-11-02 14:42:30
オリジナル
692 人が閲覧しました

Why is my JavaScript removeEventListener() not working?

Javascript RemoveEventListener が機能しない

このコードでは、addEventListener() メソッドを使用してイベント リスナーが要素に追加されます。

area.addEventListener('click',function(event) ...,true);
ログイン後にコピー
ログイン後にコピー

その後、別の関数で、removeEventListener() メソッドを使用してイベント リスナーを削除しようとします。

area.removeEventListener('click',function(event) ...,true);
ログイン後にコピー
ログイン後にコピー

ただし、イベント リスナーは削除されません。なぜこのようなことが起こるのでしょうか?

問題:
問題は、addEventListener() メソッドと RemoveEventListener() メソッドに引数として渡される 2 つの匿名関数が 2 つであるという事実にあります。 🎜>異なる機能。イベント リスナーが次のコードで追加されると:

area.addEventListener('click',function(event) ...,true);
ログイン後にコピー
ログイン後にコピー
ランタイムは新しい一意の匿名関数オブジェクトを作成し、それをエリア要素のクリック イベント ハンドラーに割り当てます。

Whenイベント リスナーは次のコードで削除されます。

area.removeEventListener('click',function(event) ...,true);
ログイン後にコピー
ログイン後にコピー

異なる の新しい一意の匿名関数オブジェクトが作成され、エリア要素のクリック イベント ハンドラーに割り当てられます。最初の関数は削除されないため、クリック イベントの処理を継続します。

解決策:イベント リスナーを正しく削除するには、removeEventListener() メソッドを提供する必要があります。 addEventListener() メソッドに渡されたのと同じ関数オブジェクトへの参照を使用します。これを行うには、イベント リスナーを名前付き関数として定義し、その名前付き関数を addEventListener() メソッドと RemoveEventListener() メソッドの両方への引数として使用する必要があります。例:

以上がJavaScriptのremoveEventListener()が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート