～ 事件委托

由于事件会在冒泡阶段向上传播到父节点，因此，可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理（delegation），也叫事件委托。

事件代理应用事件目标的 target 和 srcElement 属性完成，利用事件代理，可以提高性能及降低代码复杂度。

案例：一个<ul>中有5个<li>，移入时变浅蓝，移出时变品红。

// 下面分别用常规方法和事件代理方法来实现

<style>
#box{background-color: pink;}
.in{height: 30px;}
</style>
<ul id="box">
    <li class="in">1</li>
    <li class="in">2</li>
    <li class="in">3</li>
    <li class="in">4</li>
    <li class="in">5</li>
</ul>
<script>
// 常规方法
var tags = box.getElementsByTagName('li');
for(var i = 0; i < tags.length; i++){
    tags[i].onmouseover = function(e){
        this.style.backgroundColor = 'lightblue';
    }
    tags[i].onmouseout = function(e){
        this.style.backgroundColor = 'pink';
    }
}
</script>

<script>
// 事件代理方法
box.onmouseover = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
    target.style.backgroundColor = 'lightblue';
}
box.onmouseout = function(e){
    e = e || event;
    var target = e.target || e.srcElement;
    target.style.backgroundColor = 'pink';
}
</script>

如果可行的话，也可以考虑为document添加一个事件处理程序，用以处理页面上发生的某种特定类型的事件。这样做与采取传统的做法相比有以下优点：

1、document对象很快就可以访问，而且可以在页面生命周期的任何时间点上为它添加事件处理程序，而无需等待DOMContentLoaded或load事件。换句话说，只要可单击的元素呈现在页面上，就可以立即具备适当的功能。

2、在页面中设置事件处理程序所需的时间更少。只添加一个事件处理程序所需的DOM引用更少，所花的时间也更少。

3、整个页面占用的内存空间更少，能够提升整体性能。

// 最适合使用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。

// 下面封装一个可以使用事件委托的事件绑定函数。
function bindEvent(elem,type,selector,fn){
  if(fn == null){
    fn = selector;
    selector = null;
  }
  elem.addEventListener(type,function(e){
    var target;
    if(selector){
      target = e.target;
      if(target.matches(selector)){
        fn.call(target,e);
      }
    }else{
      fn(e);
    }
  })
}