이벤트 감청/이벤트 핸들 추가 정보

IE 아래:

// 
function(oELement,sEvent,fnHandler){
  oELement.attachEvent('on' + sEvent,fnHandler);

// 
function(oElement,sEvent,fnHandler){
  oElement.detachEvent('on' + sEvent,fnHandler);
}

다른 브라우저 아래(물론 IE8 및 이전 버전만 지원되지 않으며 Opera 7.0 및 Opera 이전 버전도 지원되지 않음):

// 
function(oELement,sEvent,fnHandler){
  oElement.addEventListener(sEvent,fnHandler,false);
}

// 
function(oELement,sEvent,fnHandler){
  oElement.removeEventListener(sEvent,fnHandler,false);
}

원인:

이벤트 트리거 순서는 두 가지가 있는데 그것이 바로 이벤트 포획과 이벤트 거품이다.  1.거품형 이벤트: 이벤트는 가장 특정한 이벤트 목표에서 가장 불특정한 이벤트 목표 (document 대상) 의 순서에 따라 촉발됩니다.  2.포획형 이벤트 (event capturing): 이벤트는 가장 부정확한 대상 (document 대상) 에서 촉발된 다음에 가장 정확하게 (창 단계에서 이벤트를 포획할 수도 있지만 개발자가 특별히 지정해야 함) 됩니다.   크롬 브라우저는 이벤트 포획과 이벤트 거품을 지원합니다. 이벤트 핸들을 추가할 때 기본값은true입니다. 이벤트 포획을 실행하고false로 설정하여 이벤트 거품을 발생시킵니다.IE는 이벤트 거품만 지원하기 때문에 이벤트 핸들을 추가하는 방법이 다르다.

호환성 쓰기:

var EventUtil = {
    addHandler: function (oElement, sEvent, fnHandler) {
        oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)    
    },
    removeHandler: function (oElement, sEvent, fnHandler) {
        oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
    },
    addLoadHandler: function (fnHandler) {
        this.addHandler(window, "load", fnHandler)
    }
}