자바스크립트 이벤트 - DOM Lelvel 2 Event Model
Javascript 2012. 4. 11. 13:49
DOM Lelvel 2 이벤트 모델은 Level 1 이벤트 모델의 최대 단점이었던 이벤트 타입당 복수 핸들러 할당이 가능한 이벤트 설계 모델입니다.
즉, 해당 엘리먼트의 이벤트 타입당 하나 이상의 핸들러 할당이 가능합니다.
이벤트 할당 방법은 아래 코드와 같습니다.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<TITLE> New Document </TITLE>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
<script>
-
-
-
// DOM LEVEL 2 Event Model 처리 함수
-
function bind(elem, type, handler, capture)
-
{
-
-
type = typeof type === 'string' && type || '';
-
handler = handler || function(){ ; };
-
-
if (elem.addEventListener){
-
elem.addEventListener(type, handler, capture);
-
}
-
else if (elem.attachEvent){
-
elem.attachEvent('on' + type, handler);
-
}
-
-
return elem;
-
};
-
-
// 동일 엘리먼트의 동일 이벤트 타입에 복수 이벤트 할당
-
var cnt = 0;
-
bind(window, 'load', function(){
-
-
bind(document.getElementById('test_object1'), 'click', function(e){
-
-
alert(cnt++); // 0
-
}, false);
-
-
bind(document.getElementById('test_object1'), 'click', function(e){
-
-
alert(cnt++); // 1
-
-
}, false);
-
-
-
}, false);
-
-
</script>
-
-
-
</HEAD>
-
<BODY>
-
<div id="test_object1">CLICK!!!</div>
-
</BODY>
-
</HTML>
위 소스는 Dom Level 2 이벤트 모델의 메서드로 작성된 소스이며, test_object1 엘리먼트의 클릭 이벤트 호출 시 전역 cnt 변수의 증감값을 대화창으로 노출시키도록 하였습니다.
