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);

그러나 이벤트 리스너는 연결된 상태로 유지되어 제거되지 않습니다.

해결책

이 문제의 원인은 이벤트 리스너가 연결된 방식에 있습니다. 각각의 다른 함수 인스턴스는 별도의 이벤트 리스너를 생성합니다. 이 경우 리스너를 추가하고 제거하는 데 두 개의 익명 함수가 사용됩니다.

문제를 해결하려면 제거에 사용된 함수 참조가 리스너 추가에 사용된 함수 참조와 동일한지 확인하세요.

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는 호출 시 이벤트 리스너를 올바르게 제거할 수 있습니다.