> 웹 프론트엔드 > JS 튜토리얼 > 내 JavaScript `removeEventListener`가 작동하지 않는 이유는 무엇입니까?

내 JavaScript `removeEventListener`가 작동하지 않는 이유는 무엇입니까?

DDD
풀어 주다: 2024-11-02 03:08:03
원래의
350명이 탐색했습니다.

Why Isn't My JavaScript `removeEventListener` Working?

Javascript의 RemoveEventListener가 작동하지 않는 이유는 무엇입니까?

이벤트 리스너를 제거하려고 하면 사용자가 어려움을 겪을 수 있으며, 구현에 문제가 있습니다. 이 문제를 해결하기 위해 제공된 코드를 분석해 보겠습니다.

주어진 예에서 이벤트 리스너는 클릭 이벤트에 대한 Area라는 요소에 연결됩니다. 하지만 나중에 다른 함수에서 리스너를 제거하려고 하면 제거에 실패합니다.

이러한 실패 이유는 addEventListener와 RemoveEventListener에 전달된 두 개의 익명 함수가 서로 다른 함수이기 때문입니다. 둘 다 영역의 클릭 이벤트를 처리하지만 동일한 함수 개체는 아닙니다. 결과적으로 addEventListener에서 동일한 익명 함수 참조를 사용하여 이벤트 리스너를 제거하면 작동하지 않습니다.

이 문제를 해결하려면 이벤트 리스너 추가 및 제거에 동일한 익명 함수 참조를 사용해야 합니다. 이렇게 하면 removeEventListener 함수가 이전에 추가된 특정 리스너를 올바르게 대상으로 지정하고 제거할 수 있습니다.

수정된 코드 조각의 예는 다음과 같습니다.

<code class="javascript">function foo(event) {
     app.addSpot(event.clientX,event.clientY);
     app.addFlag = 1;
 }
 area.addEventListener('click',foo,true);
 area.removeEventListener('click',foo,true);</code>
로그인 후 복사

이벤트 핸들러에 대해 foo와 같은 명명된 함수를 활용하면 이벤트 리스너를 추가하고 제거하는 데 동일한 함수 객체를 참조할 수 있습니다. 원하는 경우 올바르게 제거됩니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿