window.getEventListeners 를 통해 현재 걸려 있는 이벤트 확인하기

📌 : PreventLeave 를 공부하면서 이벤트가 추가되었는지 삭제되었는지 확인할 필요가 생겼다.

        처음에는 아래 코드처럼 코드 내에서 window.getEventListeners(window) 를 통해 확인하려고 했다.

        그러나 해당 명령은 (크롬의 경우) 콘솔창에서만 작동한다는 것을 알았다.

const usePreventLeave = () => {
  const listener = (event) => {
    event.preventDefault();
    event.returnValue = "";
  };
  const enablePrevent = () => {
    window.addEventListener("beforeunload", listener);
    console.log("protect");
    // window.getEventListeners(window)
  }
  const disablePrevent = () => {
    window.removeEventListener("beforeunload", listener);
    console.log("unprotect");
    // window.getEventListeners(window)
  };
  return { enablePrevent, disablePrevent };
};

export default usePreventLeave;

📌 : 처음 브라우저를 실행하고 window.getEventListeners(window) 를 명령하면

        beforeunload의 배열에 1개가 담겨있다.

이후 Protect 버튼을 누르면 웹브라우저가 닫히기 전에 alert을 띄우며 배열에는 2가 된다.

이후 Unprotect 버튼을 누르면 다시 배열이 1개로 줄어들며 웹브라우저가 닫히는 것을 보호하지 않는다.

해당과정을 통해 Protect 버튼을 여러번 누르면 event가 중첩되는 것 같다.

그러나 실제로 이벤트 배열을 확인하면 2개만 생성되어있다. 

아직은 정확히 잘모르겠지만 지금까지 확인한 결과 배열의 길이가 1이면 아무런 이벤트 등록이 안되어있고

배열의 길이가 2이면 이벤트 등록이 되어 있는 것 같다. 

 

차후 더많은 실험을 통해 이 글을 작성하겠다.