Window VS Document

장세진·2023년 6월 21일
1
post-thumbnail

개발하면서 window 객체와 document 객체를 수도 없이 사용해 왔지만 그 개념에 대해서 더 확실하게 알고 싶어서 정리를 해보고자 한다. 이 개념을 찾아보게 된 이유는 이벤트 리스너의 사용이 겹칠 때가 종종 있어서 였는데 정보를 찾아보며 알게 된 사실을 정리해볼까 한다.

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 에 대한 접근 및 조작이 가능하다.

window.addEventLister VS document.addEventLister

사실 둘의 차이는 명확하지 않다. stackoverflow 에 나와 있는 설명에 의하면 각각이 제어하는 이벤트 리스너에 차이가 있기 때문에 구분해서 써야한다고 한다. 대표적으로 resize 이벤트가 있는데 이 이벤트의 경우 window 이벤트 리스너에는 있지만 document 이벤트 리스너에는 있지 않다.

하지만 click 과 같이 windowdocument 에 공통으로 들어가 있는 이벤트도 있는데 이 경우stackoverflow 의 답변은 이렇다.

전파된 이벤트의 유일한 주요 차이점은 타이밍입니다. 이벤트는 계층 구조에서 documentwindow 보다 먼저 발생하지만 일반적으로 그 차이는 중요하지 않으므로 둘 중 하나를 선택해도 됩니다. 일반적으로 전파된 이벤트를 처리할 때는 이벤트의 소스와 가장 가까운 객체를 선택하는 것이 필요에 부합합니다. 즉, 둘 다 작동할 때 window 보다 document 를 선택하는 것이 좋습니다.

직접 같은 이벤트를 등록하고 이벤트를 실행해보았는데 document 로 등록한 이벤트가 먼저 실행이 되었다.

참조

자바스크립트 Window / Document 무슨 차이일까?
Difference between document.addEventListener and window.addEventListener?

profile
풀스택이 되고 싶은 프론트엔드 개발자

0개의 댓글