개발하면서 window
객체와 document
객체를 수도 없이 사용해 왔지만 그 개념에 대해서 더 확실하게 알고 싶어서 정리를 해보고자 한다. 이 개념을 찾아보게 된 이유는 이벤트 리스너의 사용이 겹칠 때가 종종 있어서 였는데 정보를 찾아보며 알게 된 사실을 정리해볼까 한다.
window
객체는 브라우저라는 host
환경에서 동작하는 최상위 객체이며 브라우저 환경에서 동작하는 여러 API들의 가교 역할을 한다. 브라우저가 가지고 있는 API
(대표적으로 setTimeOut) 에 대한 접근 및 실행이 가능한 것은 window
객체 때문이다.
브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체이므로 서버사이드 렌더링의 경우에는 window
객체가 없어 문제가 생길 수 있다.
브라우저에서는 어디서든 window
객체에 접근을 할 수 있으며 window
객체 안에 선언 된 메소드와 변수는 window.메소드
또는 window.변수
형태로 사용하지 않아도 아래와 같이 사용이 가능하다. 자주 사용했던 innerWidth
, settimeOut
또한 window.innerWidth
, window.settimeOut
로 사용하지 않아도 실행이 된다.
window
객체 안에는 document
객체가 존재하며 document
객체에는 dom
에 대한 정보가 담겨 있으며 html
문서 그 자체를 나타낸다. 때문에 dom
에 대한 접근 및 조작이 가능하다.
사실 둘의 차이는 명확하지 않다. stackoverflow 에 나와 있는 설명에 의하면 각각이 제어하는 이벤트 리스너에 차이가 있기 때문에 구분해서 써야한다고 한다. 대표적으로 resize
이벤트가 있는데 이 이벤트의 경우 window
이벤트 리스너에는 있지만 document
이벤트 리스너에는 있지 않다.
하지만 click
과 같이 window
와 document
에 공통으로 들어가 있는 이벤트도 있는데 이 경우stackoverflow 의 답변은 이렇다.
전파된 이벤트의 유일한 주요 차이점은 타이밍입니다. 이벤트는 계층 구조에서
document
가window
보다 먼저 발생하지만 일반적으로 그 차이는 중요하지 않으므로 둘 중 하나를 선택해도 됩니다. 일반적으로 전파된 이벤트를 처리할 때는 이벤트의 소스와 가장 가까운 객체를 선택하는 것이 필요에 부합합니다. 즉, 둘 다 작동할 때window
보다document
를 선택하는 것이 좋습니다.
직접 같은 이벤트를 등록하고 이벤트를 실행해보았는데 document
로 등록한 이벤트가 먼저 실행이 되었다.
자바스크립트 Window / Document 무슨 차이일까?
Difference between document.addEventListener and window.addEventListener?