[JavaScript] 걸려 있는 클릭 이벤트 핸들러 제거하기 remove Event Listener

 

- 걸려 있는 이벤트 핸들러 제거하기 -

document.querySelector('#myBtn').removeEventListener('click',
	getEventListeners( document.querySelector('#myBtn')  ).click[0].listener );

 

- 대략적인 과정 - 

 

먼저 이벤트가 걸려 있는 요소에 접근한다.

const target = document.querySelector('#myBtn');

 

 

그리고 요소로부터 이벤트 제거 함수를 꺼내 실행한다.

target.removeEventListener();

여기서 removeEventListener() 함수에 필수로 넣어줘야 하는 전달인자는 두 가지다.
하나는 이벤트 종류이고, 다른 하나는 이벤트 리스너 함수 자체다.
세 번째 전달인자는 옵션 값이므로 넣어줘도 되고 안 넣어줘도 된다.

removeEventListener(type, listener);
removeEventListener(type, listener, options);
removeEventListener(type, listener, useCapture);

예를 들어 아래와 같은 요소가 있다.
<button id="myBtn">
이 요소에 클릭 이벤트가 두 가지 걸려 있다.
하나는 myFunc1() 이고 다른 하나는 myFunc2() 이다.
이중에 클릭했을 때 myFunc1(O) 만 실행하도록 하고, myFunc2(X)는 실행하지 않고 싶다.
그러면 클릭 이벤트 리스너에서 myFunc2() 함수를 제거하면 된다.

document.querySelector('#myBtn').removeEventListener('click', myFunc2);

 

-  제거하고 싶은 함수가 익명 함수로 정의되어 있는 경우 - 

위와 같은 경우처럼 함수가 미리 정의되어 있고 그 함수 이름을 전달 인자로 전달할 수 있다면 편하다.
하지만 이벤트가 익명함수로 걸려 있다면 해당 리스너 함수를 전달 인자로 넣어주기가 곤란하다.
요소에 걸려 있는 클릭 이벤트를 모두 리스트로 꺼내와서 전달 인자로 넘겨주는 방법이 있다.
요소에 걸려 있는 모든 이벤트 리스너를 불러오는 함수는 아래와 같다.

getEventListeners( target );

 

그러면 걸려 있는 이벤트 종류별로 반환해 준다.

blur: [{…}]
click: (2) [{…}, {…}]
focus: [{…}]
input: [{…}]
keydown: [{…}]
keyup: [{…}]

 

그중에서 우리는 클릭 이벤트가 필요하므로 click 에 접근하자.
그러면 아래와 같이 리스트를 얻을 수 있다.

const result = getEventListeners( target );
result.click;

 

 

0: {useCapture: false, passive: false, once: false, type: 'click', listener: ƒ}
1: {useCapture: false, passive: false, once: false, type: 'click', listener: ƒ}

이 리스트 안에서 내가 제거하고 싶은 함수의 인덱스를 확인한다.

const result = getEventListeners( target );
result.click[1];

listener: ƒ (t)
once: false
passive: false
type: "click"
useCapture: false

이 안에 보면 우리가 찾던 listener 함수도 있고,
once나 passive, useCapture 처럼 옵션들도 들어 있다.
이중에 listener 에 접근하자.

const result = getEventListeners( target );
result.click[1].listener;

그러면 내가 제거하고 싶은 이벤트 리스너 함수에 접근하는 법을 찾았으니, 
이 함수를 이벤트 리스너 제거 함수에 전달 인자로 넣어주면 된다.

document.querySelector('#myBtn').removeEventListener('click',
getEventListeners( document.querySelector('#myBtn')  ).click[1].listener );

아래 코드는 위와 같은 내용인데 조금 풀어서 썼을 뿐이다.

const target = document.querySelector('#myBtn');
const listenerList = getEventListeners( target );
target.removeEventListener('click', listenerList.click[1].listener );

 

1번 인덱스에 있던 click 이벤트 리스너가 사라진 것을 볼 수 있다.

 

-220906