04-1.브라우저 이벤트 모델

 브라우저 이벤트 모델

 

▶ DOM 레벨 0 이벤트 모델 ◀

[ Event 인스턴스 ]

대부분의 브라우저에서 이벤트 핸들러가 실행될 때 Event 클래스의 인스턴스가 첫 번째 매개변수로 전달.
인터넷 익스플로러는 window의 event 프로퍼티에 Event 인스턴스를 저장.
이 차이점을 해결하려고 다음과 같은 코드를 사용한다.

1. if (!event) event = window.event;

표준 브라우저의 경우 target 프로퍼티를 참조하지만 인터넷 익스플로러의 경우 srcElement 프로퍼티를 참조하므로
다음과 같은 코드를 사용하여 해결한다.

1. var target = (event.target) ? event.target : event.srcElement;

 

 

[ 이벤트 버블링 ]

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

# 이벤트 버블링을 막고 싶을 때
표준 호환 브라우저 : Event 인스턴스의 stopPropagation() 메서드 호출
인터넷 익스플로러 :  Event 인스턴스의 cancelBubble 프로퍼티값을 true로 설정

 

 

 

▶ DOM 레벨 2 이벤트 모델 ◀

DOM 레벨 0의 단점을 보완하였으며, 엘리먼트의 특정 이벤트 타입에 한 이벤트 핸들러만 할당할 수 있었던 것을 하나 이상 할당할 수 있게 되었다.

[ 이벤트 할당 ]

addEventListener (eventType, listener, useCapture)

- eventType : 처리할 이벤트 타입을 지정. DOM 레벨 0 이벤트 모델의 이벤트명에서 'on' 접두어를 뺀 것 ( click, mouseover, keydown 등 )
- listener : 핸들러로 할당할 함수의 참조나 인라인 함수
- useCapture : 레벨 2 모델에서 이벤트 전파. Boolean 값을 가진다. false로 설정하면 버블 핸들러로 실행, true로 실행하면 캡처 핸들러로 실행.

 

 

[ 이벤트 전파 ]

캡처 단계 : 이벤트를 DOM 트리의 루트에서 대상 엘리먼트로 전파.
버블 단계 : 대상 엘리먼트에서 DOM 트리의 루트로 전파.

※ 캡처 단계는 인터넷 익스플로러가 DOM 레벨 2 이벤트 모델을 지원하지 않기 때문에 거의 사용되지 않는다.

 

 

[ 인터넷 익스플로러 이벤트 모델 ]

인터넷 익스플로러의 경우 addEventListener() 메서드가 아니라 attachEvent() 메서드를 각 DOM 엘리먼트에 정의.

attachEvent(eventName, handler)
- eventName : 핸들러를 추가할 이벤트 타입명
- handler : 핸들러로 덧붙일 함수

이 글은 스프링노트에서 작성되었습니다.