[Event] 분리와 점진적 개선을 고려한 이벤트 처리

분리와 점진적 개선을 고려한 이벤트 처리. 자주 사용하는 이벤트 유틸리티는 퍼사드 메서드로 만든다.

<button id="clickme">Click me: 0</button>

var myevent = {
     'stop' : function(e){    //퍼사드메서드

          // 이벤트 객체를 가져온다.
          e = e || window.event;

          // IE 이외의 모든 브라우저
          // 기본동작이 수행되지 않게 한다.
          if(typeof e.preventDefault === 'function'){
               e.preventDefault();
          }          
          // 이벤트가 상위 노드로 전파되지 않게 한다.
          if(typeof e.stopPropagation === 'function'){
               e.stopPropagation();
          }
         
          // IE          
         // 기본동작이 수행되지 않게 한다.
          if(typeof e.returnValue === 'boolean'){
               e.returnValue = false;
          }          
          // 이벤트가 상위 노드로 전파되지 않게 한다.
          if(typeof e.cancelBubble === 'boolean'){
               e.cancelBubble = true;
          }
     }
}

var b = document.getElementById('clickme');
if (document.addEventListener) { // W3C
    b.addEventListener('click', myHandler, false);
} else if (document.attachEvent) { // IE
    b.attachEvent('click', myHandler);
} else { // last resort
    b.onclick = myHandler;
}

function myHandler(e) {
    var src, parts;

    // get event and source element
    e = e || window.event;
    src = e.target || e.srcElement;
   
    // actual work: update label
    parts = src.innerHTML.split(": ");
    parts[1] = parseInt(parts[1], 10) + 1;
    src.innerHTML = parts[0] + ": " + parts[1];
   
    myevent.stop();
}