window객체와 이벤트 (BOM/DOM) window.onload

브라우저 객체 모델 BOM, Browser Object Model은 웹 브라우저와 관련된 객체의 집합을 의미한다.

대표적인 브라우저 객체 모델로는 Window, Location, Navigator, history, screen, document 객체가 있다.

 

 

                                                                      window 객체 

┌────────┬────────┼────────┬────────┐

location 객체        navigator 객체         history 객체             screen 객체         document 객체

 

└────────────┬────────────┘                             │

                                               브라우저 객체                                                                        문서 객체

                                  BOM(Browser Object Model)                      DOM(Document Object Model)               

 

간단하게 문서 객체 모델 DOM, Document Object Model 이라 통합해서 부르기도 하지만, document객체와 관련된 객체의 집합을 문서 객체 모델 이라고 부르고, 그 이외의 객체 집합을 브라우저 객체 모델이라고 정의한다.

 

 

window객체

window객체는 브라우저 기반 자바스크립트의 최상위 객체이다.

웹 브라우저의 창(window)를 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다.

 

자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 window객체의 프로퍼티가 된다.

window객체의 메소드는 전역 함수이며, window객체의 프로퍼티(속성)는 전역 변수가 된다.

문서 객체 모델(DOM)의 요소들 또한 모두 window객체의 프로퍼티(속성)가 된다.

 

지금까지 함수처럼 사용한 alert( ), prompt( ) 함수 모두 window객체의 메서드이다.

단순히 객체와 함께 사용하느냐, 사용하지 않느냐에 따라 함수와 메서드를 구분하는데, 사실 자바스크립트는 두 단어를 구분할 필요가 없다.

 

window객체의 onload 이벤트 속성

문서 객체 속성 중 'on'으로 시작하는 속성을 이벤트 속성이라고 부르며, 함수를 할당해야 한다.

window.onload = function () {
    // 함수 호출시 실행할 내용
}

위의 코드와 같이 window객체가 로드가 완료되면 자동으로 할당한 함수를 실행하게 된다.

이것을 window객체에 onload 이벤트 리스너를 연결한다 라고 말한다.

 

window객체가 로드가 완료되는 순간은 HTML페이지에 존재하는 모든 태그가 화면에 올라가는 순간이 바로 로드가 완료되는 순간이다.

 

쉽게 말해 HTML페이지가 열리고 태그들에 의해 페이지가 구성되는 순간 window.onload = function () {} 코드가 실행된다.

---

필자는 그렇다면 이벤트 속성중 onClick을 window객체에 연결하여 사용하면 어떻게될까? 라는 의문을 갖고 다음 코드를 실행하였다.

window.onClick = function () {
    console.log("메롱메롱");
}

window객체가 click되면 연결된 이벤트 리스너가 실행되는 원리이다.

따라서 페이지가 열리고 웹브라우저창의 어디든지 클릭하게 되었을때 개발자도구의 console에 "메롱메롱"이라는 문자열이 출력된다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---