[JavaScript] 이벤트 핸들링 addEventListener, attachEvent (크로스 브라우저)

DOM 레벨 2 이벤트 모델과 이전 버전의 가장 두드러진 차이점은 특정 이벤트 핸들러 프로퍼티에 의존적이지 않다는 점이다. 즉, 하나의 이벤트나 객체에 다수의 이벤트 핸들러를 등록시킬 수 있다.

addEventListener 구문의 형식은 다음과 같다.

object.addEventListener('event', function, boolean);

첫 번째 인자는 click이나 load와 같은 이벤트, 두 번째 인자는 핸들러 함수, 세 번째 인자는 이벤트를 처리하는 방식을 말하는데, 여기에는 케스케이드다운(cascade-down)과 버블업(bubble-up)의 두 가지 방식이 있다. 세 번째 인자에 false값을 주면 이벤트 리스너가 버블업 방식으로 동작하고, true값을 주면 케스케이드다운 방식으로 동작한다.
이벤트 리스너의 제거는 removeEventListener 함수를 사용한다.

addEventListener와 removeEventListener에 상응하는 IE 메소드는 attachEvent와 detachEvent이다. attachEvent의 형식은 다음과 같다.

object.attachEvent("event", function);

 

// 이벤트 등록
function setup(event) {
   var evtObject = document.getElementById("objectId");
   
   if (evtObject.addEventListener) {
      evtObject.addEventListener("click", handler, false);
   } else if (evtObject.attachEvent) {
      evtObject.attachEvent("onclick", handler);
   } else if (evtObject.onclick) {
      evtObject.onclick = handler;
   }
}

// 이벤트 핸들러
function handler(event) {
   // 이벤트 처리 코드
}