DOM 레벨2 이벤트 모델

DOM 레벨0 이벤트 모델의 단점은 엘리먼트의 특정 이벤트 타입에 한 이벤트 핸들러만 할당할 수 있다는 것

 

. 이벤트 할당하기

  DOM 레벨2에서는 특정 엘리먼트 메서드를 사용하여 이벤트 핸들러를 할당

  각 DOM 엘리먼트는 이벤트 핸들러를 덧붙일 수 있는 addEventListener()메서드를 정의

 

  addEventListener( eventType, listener, useCapture )

  eventType : DOM 레벨0 이벤트 모델의 이벤트명에서 'on' 접두어를 뺀 것.  click, keydown등

  listener : 핸들러로 할당할 함수의 참조나 인라인 함수

  useCapture : event 캡처 단계에서 사용할지의 Boolean값.

                     true - 캡처 단계 핸들러로 실행, false - 버블 단계 핸들러로 실행

 

  ※ 기존 event 핸들러를 가진 엘리먼트에 addEventListener()로 새로운 event 핸들러를 추가한 경우라도 W3C 표준은 두 핸들러의 실행순서를 (추가한 순서대로 실행되도록) 보장하지 않는다.

     엘리먼트에 할당된 핸들러의 실행순서는 변경될 수 있다.

 

 

. 이벤트 전파

  DOM 레벨2 이벤트 모델에서 이벤트가 호출되면

  이벤트를 DOM트리의 루트에서 대상 엘리먼트로 전파하고,  ← 캡처 단계

  다시 대상 엘리먼트에서 DOM트리의 루트로 전파한다.  ← 버블 단계