JavaScript での EventListener 削除の問題:removeEventListener() が失敗する理由

JavaScript では、イベント リスナーにより、開発者はクリックやマウスの動きなどの DOM 要素イベントを監視できます。もっと。イベント リスナーをアタッチするのは非常に簡単ですが、削除すると問題が発生する場合があります。

コード

元のコードは、クリックされると area という名前の要素にイベント リスナーを追加します。

area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

問題

この問題は、コードの後半でイベント リスナーを削除しようとしたときに発生します。

area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);

ただし、イベント リスナーはアタッチされたままになり、削除できません。

解決策

この問題の原因は、イベント リスナーのアタッチ方法にあります。異なる関数インスタンスごとに、個別のイベント リスナーが作成されます。この場合、リスナーの追加と削除に 2 つの匿名関数が使用されます。

この問題を解決するには、削除に使用される関数参照がリスナーの追加に使用される関数参照と同一であることを確認してください。

function handleClickListener(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}

// Add event listener
area.addEventListener('click', handleClickListener, true);

// Remove event listener
area.removeEventListener('click', handleClickListener, true);

両方の操作に同じ関数参照を使用することで、JavaScript は呼び出されたときにイベント リスナーを正しく削除できます。