//HTML 문서 로딩 완료, 이미지, CSS 같은 외부 컨텐츠 로딩 완료 후에 발생하는 이벤틏
window.addEventListener("load", function () {});
//HTML 문서 로딩 완료(DOM 객체 생성 완료) 후에 발생하는 이벤트
document.addEventListener("DOMContentLoaded", function () {};자바스크립트 코드를 짜며 window객체와 document객체의 차이에 대해 잘 알지 못하고 사용한 점이 생각나서 포스팅한 게시물입니다.
평소에 window / document 객체를 참조하는 흔한 작업들은 다음과 같았다.
- 이벤트 리스너 등록
window.addEventListener("scroll", function () {});
document.addEventListener("click", function() {});- dom에 접근
document.body.style.backgroundColor = "#fafafc";
document.getElementById("nextForm").focus();- 스크롤 위치 이동
window.scrollTo(pos);- 창 닫기 / 열기
window.close();
window.open(url);나열해놓고 보니 window객체와 document객체에서 하는 일이 뭔가 미묘하게 다른 건 알겠다.
하지만 여전히 명확한 차이가 무엇인지, 두 객체의 addEventListener가 어떤 차이인지 모르겠다.
다행히 이러한 궁금증을 나만 가진것이 아니었기 때문에 다른 분들이 stackoverflow에 작성하신 질문들이 있었고, 거기엔 좋은 답변들이 준비되어 있었다.
결론만 요약하자면 다음과 같다.
-
window 객체는 브라우저라는 host 환경에서 동작하는 최상위 객체로, 브라우저 환경에서 동작하는 여러 API들의 가교 역할을 한다. document, history, location, setTimout, cookieStore 등 다른 브라우저 api에 접근을 제공한다.
-
JSDom등의 환경에서는 표준 window 객체의 인터페이스를 바탕으로 구현한 더미 window 객체(더미라고 해도 몇몇 기능들은 동작한다)를 사용하게 되는데 이 경우에는 실제 브라우저의 인터페이스와 다를 수 있으니 주의해야 한다.
-
document 객체는 window에 로드되는 HTML 문서 그 자체를 나타내며(document 객체가 존재), 해당 문서 내부의 HTML Element, Css 등을 제어할 수 있는 여러 메서드를 제공한다. 보편적으로 window 객체의 프로퍼티로 제공된다. document 객체는 window.document 혹은 document로 접근이 가능하다.
-
일반적으로 querySelector 등의 메서드로 css selector 기반의 element 쿼리를 많이 하게 된다.
-
window 객체는 전역으로 선언되어 있기 때문에 window객체 안에 있는 요소는 "window."와 같이 window객체를 참조하지 않고도 property 이름으로 바로 접근이 가능하다. 예컨대 window.innerHeight는 그냥 innerHeight로 접근이 가능하다. ( 오... 신기... 하지만 혼동이나 scope 등의 문제로 window.innerHeight 이런 식으로 사용하는 게 좋을 것 같다. )
document객체와 window객체에서 수용 가능한 eventList가 다르기 때문에, 같은 addEventListener이 있다고 하더라도, 각 용도에 맞게 호출해야 한다.
[결론] window.addEventLister VS document.addEventLister
사실 둘의 차이는 명확하지 않다. stackoverflow 에 나와 있는 설명에 의하면 각각이 제어하는 이벤트 리스너에 차이가 있기 때문에 구분해서 써야한다고 한다. 대표적으로 resize 이벤트가 있는데 이 이벤트의 경우 window 이벤트 리스너에는 있지만 document 이벤트 리스너에는 있지 않다.
하지만 click 과 같이 window 와 document 에 공통으로 들어가 있는 이벤트도 있는데 이 경우stackoverflow 의 답변은 이렇다.
전파된 이벤트의 유일한 주요 차이점은 타이밍입니다. 이벤트는 계층 구조에서 document 가 window 보다 먼저 발생하지만 일반적으로 그 차이는 중요하지 않으므로 둘 중 하나를 선택해도 됩니다. 일반적으로 전파된 이벤트를 처리할 때는 이벤트의 소스와 가장 가까운 객체를 선택하는 것이 필요에 부합합니다. 즉, 둘 다 작동할 때 window 보다 document 를 선택하는 것이 좋습니다.
직접 같은 이벤트를 등록하고 이벤트를 실행해보면, document 로 등록한 이벤트가 먼저 실행이 된다.
