DOM2級事件流

事件流描述的是從頁面中接收事件的順序，DOM2級事件規定的事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段。

HTML事件處理程序

<script>
  function show(){
    alert("Hello!~");
  }
</script>
<input type="button" value="Click Me" onclick="showMessage()" />

缺點：

1. 時差問題導致的錯誤。如果在showMessage()函數有定義之前單擊了按鈕，就會引發錯誤。
2. 這樣擴展事件處理程序的作用域鏈在不同瀏覽器中會導致不同的結果。
3. HTML與JavaScript代碼緊密耦合。如果要更換事件處理程序，就要改動兩個地方。

DOMO0級事件處理程序

事件處理程序在其所屬元素的作用域內運行。

var btn = document.getElementById("button");
btn.onclick = function(){
  alert(this.id);// "button"
};

IE事件處理程序

事件處理程序在全局作用域內運行。

var btn = document.getElementById("button");
btn.attachEvent("onclick",function(){
  alert(this);// window
});

DOM2級事件處理程序

var btn = document.getElementById("button");
var action = function(){
  alert(this);
};
btn.addEventListener("click", action, false);// false表示在冒泡階段調用事件處理程序；true表示在捕獲階段調用事件處理程序

btn.remoEventListener("click", action, false);

事件對象

在觸發DOM上的某個事件，會產生一個事件對象event，這個對象中包含著所有與事件有關的信息。

var btn = document.getElementById("buton");
btn.addEventListener("click", function(event){
  alert(event.type); //"click"
},false);

阻止特定事件的默認行為，使用preventDefault()方法。

var link = document.getElementById("link");
link.onclick = function(event){
  event.preventDefault();
}

在需要用過一個函數處理多個事件時，可以使用type屬性

var btn = document.getElementById("button");
var handler = function(event){
  switch(event.type){
    case "click":
      alert("Clicked");
      break;

    case "mouseover":
      event.target.style.backgroundColor = "red";
      break;

    case "mouseout":
      event.target.style.backgroundColor = "";
      break;
  }
};

btn.onclick = hander;
btn.onmouseover = handler;
btn.onmouseout = handler;

事件委托

對“事件處理程序過多” 問題的解決方案就是事件委托。事件委托利用了事件冒泡，只指定一個事件處理程序，就可以管理某一類的所有事件。例如，click事件會一直冒泡到document層次，所以我們可以為整個頁面制定一個onclick事件處理程序，而不必給每個可單機的元素分別添加事件處理程序。

HTML

<ul id="myLinks">
  <li id="a"></li>
  <li id="b"></li>
  <li id="c"></li>
</ul>

JavaScript

  var list = document.getElementById("myLinks");

  EventUtil.addHandler(list, "click", function(event){
    event = EventUtil.getEvent(event);

    switch(target.id){
      case "a":
        console.log("1");
        break;

      case "b":
        console.log("2");
        break;

      case "c":
        console.log("3"):
        break;
    }
  });