關于jquery中的bind()、live()、delegate()的區別分析淺析

近來在研究JS的時候，小碼哥又一次看到jquery中常見的幾種綁定事件的方法：bind()，live(),delegate()。因此，閑來無事，想把他們幾個做一下系統的分析，一遍后面的碼農們能夠一起分享！

先說好，鄙人也算是JS的初學者，很復雜的模塊啥的，也是略懂而已，要是有碼神看到，可別Ma我哈！！

那好，下面就直接進入主題了~

首先，分別介紹一下這三個方法：

1、bind()——$(selector).bind(event,data,function);

    event 為必需，規定添加到元素上的一個或多個事件，由空格分隔多個事件，必需是有效事件

    data  可選，規定傳遞到函數的額外數據，一般用不到

    function  必需，規定當事件發生時運行的函數。

實例：

    $("button").bind("click",function(){

        $("p"),slideToggle();//slideToggle()方法是鼠標點擊切換

    })

還可以對同一個元素添加多個事件：$(selector).bind(event:function,event:function,....);

    $(document).ready(function(){

        $("button").bind(click:function(){

            $("p").slideToggle();

        },

        mouseover:function(){

            $("body").css({'background','red';})

        },

        mouseout:function(){

            $("body").css('background','#fff');

        });

    });

2、live()——$(selector).live(event,data,function);

    event 為必需，規定添加到元素上的一個或多個事件，由空格分隔多個事件，必需是有效事件

    data  可選，規定傳遞到函數的額外數據，一般用不到

    function  必需，規定當事件發生時運行的函數。

實例：

    $("button").live("click",function(){

        $("p").slideToggle();

    })

    live()方法有一個好處就是可以為HTML還不存在（即由JS腳本臨時創建的新元素上添加事件）

3、delegate()——$(selector).delegate(childSelector,event,data,function);

    childSelector  必需，規定要附加事件處理程序的一個或多個子元素。

    event  必需，規定附加到元素上的一個或多個事件。

    由空格分隔多個事件值，必需是有效事件。

    data 可選，規定傳遞到函數的額外數據。

    function 必需，規定當事件發生時運行的函數。

    delegate()方法同樣可以為HTML還不存在（即由JS腳本臨時創建的新元素上添加事件）。

實例：

    $('div').delegate('button','click',function(){

        $("p").slideToggle();

    })

下面就來分析一下他們的異同：

首先，單看簡單的針對某個元素進行事件綁定，他們之間貌似沒有多少區別，都可以實現簡單的事件綁定，且他們都是遵循事件冒泡（事件傳播）方式查詢要綁定事件的元素。

但bind()方法，卻不能像live()和delegate()方法那樣，為未來（即由JS腳本新生成和創建的元素）添加事件綁定。bind()方法只能對HTML中已經存在的元素添加綁定事件。

live()方法有一個最大的缺點，就是它僅能針對直接的CSS選擇器做操作，這使得它變得非常不靈活。

在live()和delegate()之間，唯一的差別就在于它們在對要綁定事件的元素的獲取速度上有差異。在事件傳播上，后者要比前者的速度更快一點，只因后者的限制條件更精準一些。這可以從它們的綁定事件的結構來看出來。

鑒于以上分析，我們更傾向于live()和delegate()方法。而這兩者，有傾向與后者。

但，對于停止事件傳播來說，bind()方法會高效而直接。因此，我們平時用來阻止事件傳播時，會選擇bind()方法：

$('a').bind('click',function(e){

    e.preventDefault();

    e.stopPropagation();

});

只因其他兩種方法由于事件冒泡而耽誤了時間。