getEventListeners로 등록된 이벤트리스너 확인하기

웹 개발에서 이벤트 리스너가 잘 해제되고 있는지 확인해야 하는 경우가 있다.

 

그럴 때 getEventListener를 사용하여 확인할 수 있다.

getEventListeners(window)
getEventListeners(document)

결과

{
  error: Array(1), 
  unhandledrejection: Array(1), 
  pagehide: Array(1), 
  popstate: Array(1)
}

결과에서 볼 수 있듯이 [Event 종류]: Array<EventTarget>으로 결과를 볼 수 있다.

 

예를 들어, React에서 visibilitychange 이벤트 리스너를 등록 후 지우지 않았다면

const Comp = ({children}) => {
  const onVisibilityChange = () => {
    /** visibilitychange 이벤트 */
  }
  
  useEffect(() => {
    document.addEventListener('visibilitychange', onVisibilityChange)
  }, [])
  
  return (
    <>
      {children}
    </>
  )
}

Comp가 마운트될 때마다 visibilitychange 이벤트 리스너 객체가 새로 등록되므로 다음처럼 visibilitychange 이벤트 객체 리스트가 마운트된 횟수만큼 쌓인다.

{
  error: Array(1), 
  unhandledrejection: Array(1), 
  pagehide: Array(1), 
  popstate: Array(1),
  visibilitychange: Array(2)
}

위 결과는 컴포넌트가 두 번 마운트 되었을 때의 결과이다.

 

따라서 getEventListener를 활용하면 추가한 이벤트 리스너가 잘 해제되었는지 확인할 때 유용하다!