인라인 이벤트 모델이나 고전 이벤트 모델은 한 번에 하나의 이벤트 리스너만을 가질 수 있다.
이러한 DOM Level 0 이벤트 모델들의 단점을 보완하려고 만들어진 이벤트 모델이 DOM Level 2 이벤트 모델이다.
DOM Level 2 이벤트 모델에는 인터넷 익스플로러 이벤트모델과 표준 이벤트 모델이 있다.
DOM Level 2
˙인터넷 익스플로러 이벤트 모델
˙attachEvent(eventProperty, eventListener) : 이벤트 연결
˙detachEvent(eventProperty, eventListener) : 이벤트 연결 제거
˙표준 이벤트 모델
표준 이벤트 모델은 웹 표준을 만드는 W3C에서 공식적으로 지정한 DOM Level 2 이벤트 모델이다.
한번에 여러 가지의 이벤트 리스너를 추가할 수 있으며, 인터넷 익스플로러 이벤트 모델과 달리 이벤트 캡쳐링을 지원한다.
˙addEventListener(eventName, handler, useCapture) : 이벤트 연결
˙removeEventListener(eventName, handler) : 이벤트 연결 제거
표준 이벤트 모델은 인터넷 익스플로러 이벤트 모델과 달리 이벤트 이름을 매개변수로 입력한다.
매개변수 userCapture는 입력하지 않으면 자동으로 false를 입력한다.
다음과 같이 click이벤트를 연결할 수 있다.
<script>
window.onload = function () {
var header = document.getElementById('my-header');
var handler = function () {
this.innerHTML += '+';
}
header.addEventListener('click',handler);
header.removeEventListener('click',handler);
}
</script>
<body>
<h1 id="my-header">Click</h1>
</body>인터넷 익스플로러 이벤트 모델 에서는 this키워드가 window객체를 나타내지만,
표준 이벤트 모델은 이벤트 리스너 안에서 this 키워드가 이벤트 발생 객체를 의미한다.
(표준 이벤트 모델에서 이벤트를 연결하는 함수의 형태는 jQuery에서 이벤트를 연결하는 형태와 흡사하므로 기억해두자.)