자바스크립트 이벤트 핸들링

onclick 속성 사용

<input type="button" value="버튼1" onclick="doProcess()">
  
btn.onclick = doProcess; //()를 붙이면 실행하고 그 결과를 넘겨주는거니까 안됨

addEventListener : 여러 이벤트 등록

btn.addEventListener('click', doProcess, false);
btn.addEventListener('click', doProcess2, false);

버블링과 캡처링

이벤트 발생 요소로부터 부모 요소까지 올라가면서 이벤트를 검사하는 것을 이벤트 버블링이라고 한다. (자식 -> 부모)

---

구형 IE에 대응하기

현재는 구형 IE를 기술적으로 지원하지 않는 곳에 대부분이지만 그래도 혹시 이후 비슷한 경우에 필요할지도 모르기 때문에, 대응하는 방법을 알아보았다.

//eventEx.html
...
window.onload = function(){
  var btn = document.getElementById("btn");
  cross.Event.addListener(btn, 'click', doProcess, false);
}
...

//bubblingEx.html
...
function aProcess(e){
  alert("aa");
}
// 표준에서는 이렇게 매개변수를 넣어주기만 하면 됨
function bProcess(e){
  alert("bb");

  // 익스플로어에서 event 객체를 만드는 방법
  var event = window.event || e;
  cross.Event.stopBubble(event);
}
window.onload = function(){
  var aa = document.getElementById("aa");
  var bb = document.getElementById("bb");
  aa.onclick = aProcess;
  bb.onclick = bProcess;
}
...

//crossEvent.js
var cross = {};
cross.Event = {};

cross.Event.addListener = function(element, event, handler, capture){
    capture = capture | false; // 없으면 false
    if(element.addEventListener) { // 표준 브라우저
        element.addEventListener(event, handler, capture);
    }else { // 구형 IE
        element.attachEvent('on'+event, handler);
    }
}

cross.Event.stopBubble = function(event){
    if(event.stopPropagation){ // 표준 브라우저
        event.stopPropagation();
    }else{
        event.cancelBubble = true;
    }
}