[자바스크립트] 이벤트 중복 현상 / 등록된 이벤트 리스터 확인하기 getEventListeners / 등록된 이벤트 지우기 removeEventListeners

 

JSP에서 Thymeleaf로 옮겨가면서 채팅메세지가 중복으로 오는 현상이 발생했다.

채팅 내용을 받기 위해 message 이벤트를 등록하고 messageHandler 함수를 호출하게끔 개발이 되어있었다.

중복으로 메세지가 오는 것의 원인은 채팅 페이지를 열 때 마다 이벤트가 등록이 되었기 때문이다.

window.addEventListener('message', messageHandler);

 

window 객체가 변경 되는 것은 일반적으로 페이지 전환 또는 새로운 브라우저 창을 열 때 발생하는데 SPA에서는 페이지를 새로 로드하지 않고 콘텐츠만을 변경하므로 window객체는 그대로 유지된다. 

따라서, 채팅이 있는 페이지를 여러면 열면, 연 만큼 window.addEventListener가 호출 되어 이벤트가 중복으로 등록이 되었다.

 

따라서, 다른 페이지로 이동을 하는 경우에는 등록 된 이벤트를 제거를 해주어야 한다.

 

👉등록 된 이벤트 확인

getEventListeners(객체)

나는 window 객체에 이벤트를 걸었기 때문에 getEventListeners(window)를 호출했다.

해당 함수를 호출하는 경우 아래처럼 이벤트 타입이 key값으로 된 객체를 리턴 받는 것을 확인 할 수 있다.

나의 경우에는 message 타입의 이벤트가 2개가 등록 되어 Array로 표시되었다. 

 

👉등록 된 이벤트 제거하기

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

이벤트를 제거하기 위해, 타입가 listener를 함께 넘겨주면 된다.

 

👉예시

 

1️⃣ 이벤트 등록

- 테스트를 위해 testHandler()를 만들고 이벤트를 등록해주었다.

function testHandler() {
	console.log("test")
};

window.addEventListener('message', testHandler)

2️⃣ 등록 확인

- getEventListeners(window)로 등록된 이벤트 확인시 아래처럼 등록 된 것을 확인 할 수 있다.

getEventListeners(window)

 

3️⃣이벤트 제거

window.removeEventListener('message', testHandler)

4️⃣이벤트 제거 확인

- 다시 확인해보면 등록된 이벤트가 2개이고, testHandler를 listener로 가지는 이벤트가 사라진 걸 확인 할 수 있다.

getEventListeners(window)