Event - 1 [window, 이벤트 추가, 삭제, 취소]

Window

EventTarget 이라는 속성을 상속받는 형태이다.

- 결국에는 event발생시 event관련 listener를 받아야 한다는 의미이다.

- 이러한 eventTarget은 얼마든지 다양한 DOM객체가 될수있다.

 

현재 자바스크립트가 실행되고 있는 창을 말하며 

브라우저에서는 각각의 탭을 window라는 객체로 표현한다.

 

즉, 브라우저의 탭하나가 window객체 하나라는 의미이다.

 

 

이벤트 추가

- addEventListener("이벤트 이름", 실행할 함수 )

eventTarget에 이벤트 발생시 실행될 함수를 추가한다.

 

window에 탭을 닫은 이벤트 발생시 실행할 함수를 추가하고 싶다면

const listener = (event) => {
	event.preventDefault();
	event.returnValue = '';
}

window.addEventListener("beforeunload", listener);

 

이벤트 삭제

- removeEventListener("이벤트 이름", 실행할 함수 )

eventTarget에 이전에 addEventListener로 등록한 이벤트 리스너를  삭제한다.

window.removeEventListener("beforeunload", listener);

이벤트 취소 

- event.preventDefault()

이벤트가 발생하면 해당 이벤트를 전파시키지 않고 이벤트를 취소 시킨다.

, 발생하지 않은 것처럼 이벤트 자체를 없애 버린다.

 

탭을 닫았을 때 해당 탭을 닫은 이벤트(beforeunload)를 없는 것처럼 하고 싶다면

windows.addEventListener("beforeunload", (event) => {
	event.preventDefault();
	event.returnValue = '';
})
// event라는 매개변수를 주면 이벤트 전파를 막는 익명함수이다.