jQuery事件委托

jQuery事件委托

<ul id="ulBox">
    <li data-id="1"></li>
    <li data-id="2"></li>
    <li data-id="3"></li>
</ul>

$("#ulBox").on('click','li',function(){  
      console.log($(this).attr("data-id"));
 })  

on()事件相当于是$(document).click(function(){if(点击的是btn){}})，给document添加了一个click事件，党点击的是btn，事件冒泡原理，从里到外，就相当于点击了document，那么就会执行后面的操作，本质上只给document添加了一个事件，而click()事件是给所有btn添加了click事件。

另外on()事件可以添加多个事件。

on()委托事件的优点：原来的事件绑定，要绑定好多事件，现在只需要绑定一个事件，大大提高了效率和页面性能，解决的动态添加元素导致不能触发的bug。

Jq1.7+开始支持。

 

适用性：

         适合：click 、mousedown、mouseup、keydown 、keyup、keypress

        不适合：mouseover和mouseout虽然也有事件冒泡，但是处理他们要特别注意，因为需要经常计算他们的位置，处理起来不太容易，

                  　　 focus、blur之类的本身就没有冒泡的特性，自然不能用事件委托；