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之類的本身就沒有冒泡的特性，自然不能用事件委托；