事件委託

對於「事件處理程序過多」問題的解決方案就是 事件委託，事件委託利用了事件冒泡，只指定一個事件處理程序，就能夠委託管理某一類型的全部事件

如下面html爲例

<ul id="tr">
  <li>11111</li>
  <li>11111</li>
  <li>11111</li>
  <li>11111</li>
</ul>

通常經常使用作法是給每一個li添加事件處理程序，這樣比較繁瑣，性能很差

window.onload = function () {
    var oul = document.getElementById("tr");
    var oli = oul.getElementsByTagName("li");
    for(var i = 0;i<oli.length;i++){
      oli[i].onmouseover = function () {
         this.style.background = "red";
      }
      oli[i].onmouseout = function () {
         this.style.background = "";
      }
    }
  }

此時，能夠用事件委託來解決這個問題，。使用事件委託，只需在dom樹中儘可能高的層次上添加一個事件處理，html不變

window.onload = function () {
    var oul = document.getElementById("tr");
    var oli = oul.getElementsByTagName("li");
    oul.onmouseover = function (e) {
       var event = e || window.event;
       var target = event.target || event.srcElement;
       if (target.nodeName.toLowerCase() == "li") {
        target.style.background = "red";
       }
    }
    oul.onmouseout = function (e) {
       var event = e || window.event;
       var target = event.target || event.srcElement;
       if (target.nodeName.toLowerCase() == "li") {
        target.style.background = "";
       }
    }
  }