내 JavaScript 코드에서 `removeEventListener()`가 작동하지 않는 이유는 무엇입니까?

JavaScript의 EventListener 제거 문제: ​​RemoveEventListener()가 실패하는 이유

JavaScript에서 이벤트 리스너를 사용하면 개발자는 클릭, 마우스 이동 등과 같은 DOM 요소 이벤트를 모니터링할 수 있습니다. 더. 이벤트 리스너를 연결하는 것은 매우 간단하지만 제거하는 것은 때때로 문제가 될 수 있습니다.

코드

원래 코드는 클릭할 때 Area라는 요소에 이벤트 리스너를 추가합니다.

<code class="javascript">area.addEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

문제

나중에 코드에서 이벤트 리스너를 제거하려고 할 때 문제가 발생합니다.

<code class="javascript">area.removeEventListener('click', function(event) {
  app.addSpot(event.clientX, event.clientY);
  app.addFlag = 1;
}, true);</code>

그러나 이벤트 리스너는 계속 붙어있어 제거되지 않습니다.

해결책

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

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

<code class="javascript">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);</code>

두 작업에 동일한 함수 참조를 사용하면 JavaScript가 호출될 때 이벤트 리스너를 올바르게 제거할 수 있습니다.

위 내용은 내 JavaScript 코드에서 `removeEventListener()`가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!