자바스크립트 이벤트 - Dom Level 1 Event Model
Javascript 2012. 4. 11. 13:45
DOM LEVEL 1 모델의 이벤트 할당 방법으로는 해당 엘리먼트의 속성에 할당하는 방법과 HTML 어트리뷰트에 할당하는 방법이 존재합니다.
또한, 어트리뷰트에 할당시키는 예제를 보시면 마치 alert() 함수가 해당 엘리먼트의 click 이벤트로 할당되었다고 생각할 수 있겠지만, 사실은 그렇지 않습니다.
이유는 아래 코드와 같이 할당된 어트리뷰트값(alert() 함수)을 함수 구현으로 사용하는 익명 함수(function(e){ ; })가 새로 생성되기 때문입니다.
마지막으로
DOM LEVEL 0 모델의 단점으로는 앞으로 배우게 될 DOM LEVEL 2 모델의 이벤트 설계와는 달리 해당 엘리먼트의 특정 이벤트 타입에 단 한 개의 이벤트 핸들러만 할당할 수 있다는 것입니다.
즉,
DOM LEVEL 0 이벤트 모델에선 복수 이벤트 할당이 불가능합니다.
그럼 아래 예제 소스 코드를 보시겠습니다.
방법 1: 엘리먼트 속성에 할당
-
function msg(obj, msg, e){
-
-
e = window.event || e;
-
alert(obj.nodeName);
-
alert(msg);
-
alert(e);
-
};
-
-
document.getElementById('test_object3').onclick = function(e){ msg.apply(this, [this, 'test', e]); };
-
-
// Function.apply() 함수를 이용하여 해당 엘리먼트를 가리키는 this를 넘겨준다.
-
//document.getElementById('test_object3').onclick = function(e){ msg.apply(this, ['test', e]); };
방법 2: HTML 어트리뷰트에 할당
이벤트 실행 결과
