문서 객체 모델(Document Object Model)

HTML 문서를 작성해 보면 HTML 태그가 계층적으로 이루어져 있다는 것을 알 수 있습니다. 가장 상위에 HTML 태그가 있고 아래에 HEAD, BODY 태그가 있는 식입니다. 그래서 DOM은 문서를 계층적으로 보는 방식에 기반을 두고 각 엘리먼트에 접근하게 됩니다. 이렇게 HTML 태그를 트리로 보면 각각의 태그 엘리먼트들이 트리의 노드가 되는 것을 알 수 있습니다.

이런 노드들은 객체 프로퍼티 형태로 접근이 가능합니다. 자바스크립트는 노드를 찾는 메소드와 프로퍼티를 제공하고 있습니다.

웹 애플리케이션은 사용자의 행동을 감지해 거기에 응답해야 할 때가 있습니다. 키 누름, 스크롤, 마우스 클릭, 마우스 움직임 같은 이벤트가 발생하면 이 이벤트 정보가 저장된 이벤트 객체가 생성됩니다.

 

자바스크립트에서는 DOM 요소에 핸들러를 등록해서 이런 이벤트가 발생했을 때 해당하는 응답을 할 수 있습니다.

event handler를 등록하는 방법은 크게 두가지 입니다. 하나는 html 태그 안에 onclick 속성을 이용하는 것이고 하나는 해당 노드에 addEventListener를 통해 이벤트 리스너를 추가하는 것입니다.

이벤트 핸들러를 등록할 때 주의해야 할 부분은 버블링입니다.

 

버블링은 하위 엘리먼트에서 생긴 이벤트가 상위 엘리먼트의 이벤트까지 호출하는 것을 의미합니다.