JavaScript에서 이벤트 리스너 제거

이 튜토리얼에서는 JavaScript에서 이벤트 리스너를 제거하는 방법을 설명합니다.

removeEventListener()메소드를 사용하여 JavaScript에서 이벤트 리스너 제거

요소를 만들고 사용자가 상호 작용할 때 의도 한 동작을 수행하지 않도록하려면 해당 요소에서 이벤트 리스너를 제거해야합니다. JavaScript의 내장 함수removeEventListener()를 사용하여이를 달성합니다. 이 함수는 요소에서 연결된 이벤트 리스너를 제거하고 미리 정의 된 작업을 중지합니다. 버튼에 연결된 이벤트 리스너를 제거하여 버튼 클릭을 비활성화 할 수 있습니다.

이 함수는 다음 매개 변수를 허용합니다.

1. type: 이벤트 리스너를 제거하려는 사용자 작업의 유형을 지정하는 문자열입니다.
2. listener: 해당 요소에서 제거하려는 이벤트 리스너 함수.
3. options: 이벤트 리스너의 특성을 지정하는 데 도움이되는 선택적 매개 변수입니다. 다음 옵션을 설정할 수 있습니다.
   • capture: 이벤트가 DOM 트리의 대상 이벤트로 이동하기 전에 등록 된 리스너로 이동 함을 알려주는 부울 변수입니다.
   • mozSystemGroup: 이벤트 리스너가 시스템 그룹에 추가됨을 나타내는 부울 변수입니다. XBL / Firefox의 크롬에서 실행되는 코드에서만 사용할 수 있습니다.
4. useCapture: 이벤트 리스너가 캡처 리스너인지 여부를 알려주는 부울 변수입니다. 또한 선택적 매개 변수입니다.

var element_name = document.querySelector('#btn');
var count = 0;
var counter = function(event) {
  count++;
  // perform the intended function in case of occurence of event
  if (count == 2) {
    this.removeEventListener('click', myHandler);
  }
} element_name.addEventListener('click', counter);

위 코드에서 이벤트 리스너를 추가하고 리스너가 트리거되면 수행 할 기능을 지정합니다. 사용자가 동일한 리스너를 다시 트리거하려고하면removeEventListener()를 사용하여 이벤트 리스너를 제거합니다. 먼저 이벤트 리스너를 추가 / 제거 할 요소를 선택하여이를 수행합니다. 그런 다음 클릭 수를 유지하기 위해 카운터를 초기화합니다. 마지막으로 이벤트 핸들러를 선언하고 카운트를 증가시킵니다. 사용자가 두 번 클릭하면removeEventListener()가 트리거됩니다.