DOM 레벨0 이벤트 모델

. 브라우저 이벤트 모델 이해하기

  브라우저의 이벤트 처리표준이 생기기 전 네스케이프 내비게이터(Netscape Navigator) 브라우저에 이벤트 핸들링 모델을 도입한 것을 DOM 레벨0 이벤트 모델

 

참고 - DOM레벨은 W3C DOM명세를 구현의 요구 수준을 지칭하는데 사용한다.

         사실 DOM레벨0 이라는 것은 없다.  다만 DOM 레벨1 이전에 구현한 것들을 비공식적으로 지칭한다.

 

W3C는 2000년 11월 DOM 레벨2를 발표

파이어폭스나 카미노(Camino)와 같은 모질라 기반 브라우저, 사파리, 오페라(Opera)와 같은 최신 표준을 준수하는 브라우저들이 이 모델을 지원한다.  인터넷 익스플로러(Internet Explorer)는 자체 표준이 있으며 자신만의 인터페이스를 사용하긴 하나 DOM 레벨2 이벤트 모델의 기능을 일부는 지원한다.

이렇게 인터페이스가 서로 달라 각각의 인터페이스에 맞춰 작업을 해야하는 번거로움이 발생하게 된다.

 

 

. DOM 레벨0 이벤트 모델

  이벤트 핸들러는 DOM 엘리먼트의 프로퍼티에 함수 인스턴스의 참조를 할당하여 선언

  click 이벤트는 onClick프로퍼티에 함수를 할당하고,

  mouseover이벤트는 onMouseOver프로퍼티에 함수를 할당하여 이벤트를 처리한다.

 

  onclick = "say('!!!');"

  이를 통해 say()함수가 엘리먼트의 클릭 이벤트 핸들로로 되었다고 생각할 수 있다.  하지만, 그렇지 않다.  마크업 어트리뷰트에서 핸들러를 선언하면 어트리뷰트 값을 함수 구현으로 사용하는 익명 함수가 생성된다.  실제로는 이렇다.

  xxxElement.onclick = function(event) { say('!!!'); }

  새롭게 생성된 함수의 구현으로 어트리뷰트 값을 사용하는 방식과 event 매개변수를 사용할 수 있는 구조로 새로운 함수가 생성되었다.

 

 

. Event 인스턴스

  대부분의 브라우저에서 이벤트 핸들러가 실행될 때 Event 클래스의 인스턴스가 첫번째 매개변수로 전달

  인터넷 익스플로러는 window의 event프로퍼티에 Event 인스턴스를 저장하는 방법을 사용

 

  if( !event ) event = window.event;

  이러한 객체 탐지 기법을 사용하여 event 매개변수가 정의되지 않았거나 null인지 여부를 확인

  이 문장을 실행한 이후에는 event 매개변수를 얻는 방식과 상관없이 event를 참조할 수 있다.

 

  인터넷 익스플로러는 W3C표준이 아닌 자신만의 방법으로 Event 클래스도 정의

  이러한 이유로 객체 탐지 기법을 계속 사용

 

  이벤트가 발생한 엘리먼트를 참조할 때

  var target = (event.target) ? event.target : event.srcElement;  ← 인터넷 익스플로러 때문

 

 

. 이벤트 버블링 (bubbling)

  이벤트가 발생한 엘리먼트에 핸들러가 할당되었는지 확인하고, 할당되었다면 핸들러를 호출

  그리고 DOM트리의 루트까지 반복해서 엘리먼트의 부모를 조사하며 동일한 이벤트 타입의 핸들러가 할당되어있는지 확인하고, 할당되어 있다면 이를 실행하는 것.

 

. 이벤트 전파의 영향과 그 의미

  DOM트리의 이벤트 버블링을 막고 싶을 때

  표준 호환 브라우저에서는 stopPropagation() 호출

  인터넷 익스플로러에서는 Event인스턴스의 cancelBubble프로퍼티 = true;

 

(핸들러 처리후에 자동으로 실행되는)기본 동작을 막으려면 핸들러의 반환값으로 false를 설정

<form name="myForm" onsubmit="return false;" ...

비동기 요청으로 폼을 전송하는 Ajax에서 자주 사용

 

DOM 레벨0 이벤트 모델에서는

이벤트 핸들러와 연관된 거의 모든 단계에서 어떤 동작을 수행할지 파악하는 데 브라우저 탐지 기법을 사용