[JS] document.addEventListener 와 window.addEventListener의 차이

빨간box=window  

파란box=document (html)

 

영역을 나누면 아래 사진과 같지만 아래와 같은 창의 의미보다는 그냥 window를 document보다 더 큰 범위로 생각하면 된다.

 

이 둘 사용의 차이점은 

window= (전체적용) 키다운이나 스크롤에 대부분 사용

브라우저를 켜면 가장 먼저 로딩되는 전역객체 / 자바스크립트의 최상위객체 / document를 포함

ex) window.addEventListener('onload') → onload는 window에 사용

document=  (지정요소에 적용할때) 마우스에 대부분 사용

 

구분돼서 사용되긴 하지만, 이벤트 타겟 버블링,캡처링 때문에 겹쳐서 써도 적용됨