JS中的事件委托机制

简要介绍：基于JS的事件冒泡，可以以JS事件委托的方式，在父元素上，给父元素的子元素绑定事件，同时减少事件绑定的时间复杂度。

1.传统的事件监听

HTML结构：

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JS：

window.onload=function(){
    var myUl=document.getElementById('ul');
    var list=myUl.getElementsByTagName('li');
    for(var i=0;i<list.length;i++){
      list[i].addEventListener('click',function(){
        this.style.backgroundColor="black";
      });
    }
  }

我们需要在ul的子元素上绑定事件，这里有一个for循环，循环遍历每一个li，在每一个li上绑定事件。
改li上事件功能很简单，就是点击li时，切换背景颜色。

2.通过事件委托实现事件监听

HTML：

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

JS：

window.onload=function(){
   var myUl=document.getElementById('ul');
   myUl.addEventListener('click',function(ev){
     var ev= ev||window.ev;
     if(ev.target.nodeName.toLocaleLowerCase()=='li'){
        ev.target.style.backgroundColor="black";
     }
   });
 }

这就是简单的事件委托，在这个例子中，我们并没有直接在li上绑定事件，而是在li的父元素ul上，绑定了事件，因为ul上的事件，是通过事件冒泡，由li传递到ul，事件的冒泡顺序为：

li——>ul

因此，这里的ul点击事件的ev.target指向的是ul的子元素li。这样我们就简介的在通过ul上绑定事件，不需要遍历li，就能通过事件冒泡机制，在li上绑定事件。

3.事件委托的优点

（1）绑定同类子元素时，不需要循环绑定事件。

（2）动态添加了相同类型的子元素，如果是采用事件委托，新元素也可以被相同的事件监听到，而采用传

统的事件绑定，则新元素上并没有添加相同事件的监听。