JavaScript 모든 이벤트 리스너 제거

오늘의 게시물은 JavaScript에서 모든 이벤트 리스너를 제거하는 방법에 대해 설명합니다.

JavaScript에서 모든 이벤트 리스너 제거

EventTarget 인터페이스의 addEventListener() 메서드는 지정된 이벤트가 대상에 전달될 때마다 호출되는 함수를 구성합니다.

addEventListener() 메서드는 EventListener를 구현하는 함수 또는 개체를 호출되는 EventTarget에 지정된 이벤트 유형에 대한 이벤트 리스너 목록에 추가하여 작동합니다.

함수 또는 개체가 해당 대상에 대한 이벤트 리스너 목록에 이미 있는 경우 함수 또는 개체가 두 번 추가되지 않습니다.

EventTarget 인터페이스의 removeEventListener() 메소드는 EventTarget.addEventListener()를 사용하여 대상에서 이전에 등록된 이벤트 리스너를 제거합니다.

현재 EventTarget에 등록된 EventListener를 식별하지 않는 인수로 removeEventListener()를 호출해도 아무런 효과가 없습니다.

대상의 다른 리스너가 이벤트를 처리하는 동안 EventListener가 EventTarget에서 제거되면 이벤트가 전달되지 않습니다. 그러나 위치를 변경할 수 있습니다.

특정 요소에 대해 하나 또는 두 개의 리스너만 등록된 경우 removeEventListener 호출이 쉽습니다. 10개 이상의 리스너가 등록되어 있고 모든 이벤트 리스너를 제거하려면 어떻게 해야 합니까?

노력이 필요합니다. 이를 극복하기 위해 이 지루한 작업을 수행하는 다른 방법을 배웁니다.

아래 예를 살펴보겠습니다.

<div>
<button id="grt-btn">Hello World!</button>
<button onclick="removeListeners()">Remove listeners</button>
</div>

document.getElementById('grt-btn').addEventListener(
    'click', () => {console.log('firstClick')}, false);
document.getElementById('grt-btn').addEventListener(
    'blur', () => {console.log('Blur event')}, false);
document.getElementById('grt-btn').addEventListener(
    'focus', () => {console.log('focus event')}, false);

function removeListeners() {
  const oldBtnElement = document.getElementById('grt-btn');
  const newBtnElement = oldBtnElement.cloneNode(true);
  oldBtnElement.parentNode.replaceChild(newBtnElement, oldBtnElement);
  console.log('Removed all listners')
}

위의 예에서는 2개의 버튼을 정의했습니다. 첫 번째 버튼은 리스너를 연결하는 버튼입니다.

두 번째 버튼은 첫 번째 버튼에서 리스너를 제거하는 버튼입니다.

세 가지 이벤트 리스너를 정의했습니다. Hello World 버튼을 클릭하자마자 focus 및 click 이벤트가 트리거됩니다. 다른 탭으로 이동해 보십시오. blur 이벤트를 트리거합니다.

마지막으로 Remove listeners 버튼을 클릭하면 Hello World 버튼이 복제됩니다. 마지막 단계는 div 요소의 하위 노드를 cloneNode로 교체하는 것입니다.

이렇게 하면 이전에 버튼과 연결된 모든 이벤트 리스너가 자동으로 제거됩니다.

Hello World 버튼을 다시 클릭하면 이벤트가 트리거되지 않습니다.

출력:

"focus event"
"firstClick"
"Blur event"
"focus event"
"Blur event"
"Removed all listeners"

데모