문득 여태껏 자바스크립트를 사용하면서 window객체와 document객체의 차이에 대해 잘 알지 못했다는 점이 생각나서 공부 후 포스팅한다.
내가 window / document 객체를 참조하는 흔한 작업들은 다음과 같았다.
1. 이벤트 리스너 등록
window.addEventListener("scroll", function () {}); document.addEventListener("click", function() {});
2. dom에 접근
document.body.style.backgroundColor = "#fafafc"; document.getElementById("nextForm").focus();
3. 스크롤 위치 이동
window.scrollTo(pos);
4. 창 닫기 / 열기
window.close(); window.open(url);
나열해놓고 보니 window객체와 document객체에서 하는 일이 뭔가 미묘하게 다른 건 알겠다.
하지만 여전히 명확한 차이가 무엇인지, 두 객체의 addEventListener가 어떤 차이인지 모르겠다.
다행히 이러한 궁금증을 나만 가진것이 아니었기 때문에 옛 슨배님들이 stackoverflow에 작성하신 질문들이 있었고, 거기엔 좋은 답변들이 준비되어 있었다.
Difference between document.addEventListener and window.addEventListener?
While using PhoneGap, it has some default JavaScript code that uses document.addEventListener, but I have my own code which uses window.addEventListener: function onBodyLoad(){ document.
stackoverflow.com
결론만 요약하자면 다음과 같다.
- window 객체는 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체이다. 따라서 window로 어디서든 접근이 가능하다.(서버사이드 렌더링 시엔 브라우저 렌더링이 아니기 때문에 window 객체가 없다)
- window 객체 안에는 document 객체가 존재하고, document에는 잠재적으로 보여질 수 있는 dom에 대한 정보가 저장되어 있다. document객체는 window.document 혹은 document로 접근이 가능하다. (그 이유는 바로 다음 줄에)
- window 객체는 전역으로 선언되어 있기 때문에 window객체 안에 있는 요소는 "window."와 같이 window객체를 참조하지 않고도 property 이름으로 바로 접근이 가능하다. 예컨대 window.innerHeight는 그냥 innerHeight로 접근이 가능하다. ( 오... 신기... 하지만 혼동이나 scope 등의 문제로 window.innerHeight 이런 식으로 사용하는 게 좋을 것 같다. )
- document객체와 window객체에서 수용 가능한 eventList가 다르기 때문에, 같은 addEventListener이 있다고 하더라도, 각 용도에 맞게 호출해야 한다. 즉, document에서는 resize 이벤트를 수신할 수 없고 window에서는 DOMContentLoaded 이벤트를 수신 할 수 없다. (같은 원리로 document에 이벤트를 붙이는지, document.body에 이벤트를 붙이는지에 대해서도 고민해야 할 것)이벤트 버블링과 캡쳐링과는 별개로, 각 이벤트 리스너가 수신할 수 있는 이벤트의 종류가 다르다는 것이 핵심이다.
좋은 답변들을 다 열람했고 두 객체의 차이가 뭔지 이젠 좀 명확히 알게 되었다고 해도, 글로만 익힌 지식은 실전으로 사포질을 해줘야 가슴으로 와닿는 법이다.
브라우저가 곧 런타임인 자바스크립트의 장점을 살려 바로 console.log(window)를 찍어보자.
윈도우 객체가 나왔다. 두근두근.
접힌 부분을 열어서 내용물을 까 보도록 하자.
트랙패드로 글씨쓰기 힘들다;
window 객체 안에 document 객체가 들어있는 부분을 확인할 수 있다.
저 document객체를 열어보면 알겠지만, 저 안에 dom 정보가 가지런히 정리되어 있다.
window객체를 까보면서 굉장히 많은 걸 배웠다.
일상적으로 자주 쓰던 console, alret, confirm 등의 fucntion이 window객체에 정의되어 있다는 것도 처음 알았고, window객체가 없는 서버사이드 렌더링 시에 어떤 부분을 더 주의해야 하는지 어떤 식으로 오버 라이딩 해야 하는지 와 닿게 알게 된 것 같다.
정말 유익한 시간이었다.