JavaScriptイベントの処理

onclickプロパティの使用

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

addEventListener:複数のイベントを登録する

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

発泡と捕獲

旧式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;
    }
}