JS和JQuery中的事件委托

什么是事件委托（事件代理）

事件委托通俗来讲就是利用冒泡的原理，把事件追加到父级，触发执行效果。比如当一个父节点下的多个子节点绑定相同的事件时，可以利用事件冒泡机制，将事件委托给父元素执行，这时候只需要绑定一个事件便可以触发子元素的事件。

事件委托的优点

• 只需注册一个事件，节省大量内存空间。
• 可以实现 当新增子元素时不需再为其绑定事件，尤其是动态部分的内容，比如Ajax不需再为新增的元素进行绑定和对删除的元素解除绑定。

事件委托的缺点

• 事件委托是基于事件冒泡的，如果不支持事件冒泡则不能进行事件委托。
• 如果层级过多，冒泡过程中可能受阻。

事件委托使用情景

• 为DOM中的很多元素绑定相同事件；
• 为DOM中尚不存在的元素绑定事件

事件委托的实现 -------- 实例1

先看一段html代码，要实现的功能就是当点击 li 时弹出123.

<ul id="ul">
     <li>111</li>
      <li>222</li>
     <li>333</li>
</ul>

普通方法实现，这种方法操作，每次点击li时，都会寻找目标 li 的位置，然后才能执行最后的操作。这种方法实现显然操作dom的次数很多。

var Oul=document.getElementById("ul");
var Oli=Oul.getElementsByTagName("li");
for(var i=0;i<Oli.length;i++){
      Oli[i].onclick=function(){
        alert(123);
     }
}

下面使用事件委托来实现，用这种方法来实现 只有点击 li 时才触发事件，且每次只执行一次dom 操作。大大减少了dom操作，提高了性能。

var Oul=document.getElementById("ul");
Oul.onclick=function(e){
      var e=e || window.event;
      var target=e.target ||  e.srcElement;
      if(target.nodeName.toLowerCase()=='li'){
             alert(123);
             alert(target.innerHTML);
      }
} 

事件委托的实现 -------- 实例2

当点击元素 实现的功能不一样时，怎么实现？

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
</div>

先看看普通方法的实现，这种方法实现至少要进行四次dom操作。

var add=docment.getElementById("add");
var remove=docment.getElementById("remove");
var move=docment.getElementById("move");
var select=document.getElementById("select");
add.onclick=function(){
     alert("add");
}
remove.onclick=function(){
    alert("remove");
}
 move.onclick=function(){
    alert(" move");
}
select.onclick=function(){
    alert("select");
}

下面用事件委托来实现，只需要一次dom 操作。

var box=docment.getElementById("box");
box.onclick=function(e){
     var e= e || window.event;
     var target=e.target || e.srcElement;
     if(target.nodeName.toLowerCase()=='input'){
       switch(target.id){
            case 'add':
                alert("add");
                break;
            case 'remove':
                alert("remove");
                break;
            case 'move':
                alert("move");
                break;
            case 'select':
                alert("select");
                break;
        }
    }
}

事件委托的实现 -------- 实例3

为新增节点绑定事件，当鼠标移入 li 背景颜色变成红色，当鼠标 移除 li 背景颜色变为白色，点击input 添加一个 li。

<input type="button" name="" id="btn" value="添加" />
    <ul id="ul">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>

一样先看看普通方法的实现，使用这种方法会发现 新增的 li 没有绑定事件，而且执行dom次数非常多。为新增的 li 绑定事件，可以将for封装在一个函数里，然后再去调用这个函数。

var btn=document.getElementById("btn");
var Oul=document.getElementById("ul");
var Oli=Oul.getElementsByTagName("li");
var num=4;
for(var i=0;i<Oli.length;i++){
    Oli[i].onmouseover=function(){
        this.style.background='red';
   }
   Oli[i].onmouseout=function(){
       this.style.background='#fff';
   }
}
   btn.onclick=function(){
     ++num;
     var li=document.createElement('li');
     li.innerHTML=num*111
     Oul.appendChild(li);
  }

用委托事件来实现

var btn=document.getElementById("btn");
var Oul=document.getElementById("ul");
Oul.onmouseover=function(e){
       var e= e || window.event;
       var target=e.target || e.srcElement;
       if(target.nodeName.toLowerCase()=='li'){
              target.style.background="red";
        }
}
Oul.onmouseout=function(e){
      var e=e || window.event;
      var target=e.target || e.srcElement;
      if(target.nodeName.toLowerCase()=='li'){
          target.style.background="#fff";
      }
}
btn.onclick=function(){
     ++num;
     var li=document.createElement('li');
     li.innerHTML=num*111
     Oul.appendChild(li);
  }

由上面的例子可以发现，当用事件委托的时候，根本不需要去遍历子元素直接给父元素绑定事件就可以 了。

---

JQuery中的事件委托

• delegate() 之后被on()方法代替。

$("ul").'li'('li','click',function(){
     alert('li');
  })

• on() 支持事件绑定的全部功能。

$("ul").on('click','li',function(){
     alert('li');
  })

delegate 和 on 的区别，selector 和events的顺序不同，on 可以省略selector ，而delegate不可以。