事件委托

对于“事件处理程序过多”问题的解决方案就是 事件委托，事件委托利用了事件冒泡，只指定一个事件处理程序，就可以委托管理某一类型的所有事件

以下面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 = "";
       }
    }
  }