事件委托

例如有一个文章列表:

<ul> class="arcList"
  <li><a href="#">#1</a></li>
  <li><a href="##">#2</a></li> 
  <li><a href="###">#3</a></li> 
  <li><a href="####">#4</a></li>
  <li><a href="#####">#5</a></li>
</ul>

我们想要在点击每一个a标签的时候，执行某一动作，普通做法是直接给a标签添加事件：

$(".arcList a").on("click",function(){
  alert($(this).html());
});

这样，点击每一个a时，会弹出内部的html
但是，这样会遍历每一个a标签，效率不是很高，所以就有事件委托的出现。
在这个例子中，我们可以把事件加给ul，但是当点击对象是a的时候才起作用，这样，就不需要遍历所有a节点了。

jQuery中的事件委托

.delegate()

早在jQuery 1.4里就加入了.delegate()这一事件委托的方法，上面的列表，我们可以改写成：

$(".arcList").delegate("a","click",function(){
  alert($(this).html());
});

即给ul.arcList加事件，但事件目标却是里面的a,查看Demo。

.on()

jQuery 1.7版本新加了万能的on()方法，这个方法也有事件委托的写法：

$(".arcList").on("click","a",function(){
  alert($(this).html());
});

即在事件类型后面传入事件的目标对象选择器,查看Demo。