bind：把事件繫結到每一個匹配的元素上，主要特點

1.相容性比較好

2.繫結事件到所有選出來的元素上

3.不會繫結事件到動態新增的那些元素上

4.當元素很多時，會出現效率問題，特別是巢狀層次比較深的元素。

html程式碼

<ul id="ul">
    <li>NO1</li>
    <li>NO2</li>
    <li>NO3</li>
    <li>NO4</li>
    <li>NO5</li>
</ul>

JavaScript程式碼

$("li").bind("click", function (event) {
    alert("OK");
});

Jquery程式碼：

除錯資料：

bind需要迴圈5次來繫結事件！

live：把所有的事件都繫結到jquery物件$(document) ，主要特點：

1.事件只需要繫結一次，不需要繫結到篩選出來的元素上。

2.動態新增元素後依然擁有繫結事件。

3.不能使用event.stopPropagation() 來阻止事件的冒泡。

JavaScript程式碼

$("li").live("click", function (event) {
    alert("OK");
});
 

jquery原始碼同bind

除錯資料

live只執行一次，事件繫結在根節點物件上。

delegate：將事件繫結到指定的父元素上，和live類似但比較能活。主要特點：

1.可以用在動態新增的元素上

2.繫結的父元素可以採用就近原則，減少查詢的次數，比live的效能好

3.在live和delegate兩者推薦使用delegate

JavaScript程式碼

$("#ul").delegate("li", "click", function (event) {
    alert("OK");
});

除錯資料

delegate只執行一次，事件繫結在呼叫物件

---------------------  以上程式碼來源：https://blog.csdn.net/lxcao/article/details/52734965 

on()和bind()的區別

on()和bind()的函式簽名如下：

bind(type, [data], fn)
 
on(type,[selector],[data],fn)

可以看到2個函式的區別在於：是否支援selector這個引數值。由於javascript的事件冒泡特性，如果我們在父元素上註冊了一個事件處理函式，當子元素上發生這個事件的時候，父元素上的事件處理函式也會被觸發。如果使用on的時候，不設定selector，那麼on與bind就沒有區別了。

<div id="parent">
    <input type="button" value="a" id="a"/>
    <input type="button" value="b" id="b"/>
</div>

上面這段程式碼，如果我們使用bind()在parent上綁定了click事件處理函式，當點選a或者b按鈕的時候，都會執行事件處理函式。如果我們希望點選a的時候觸發，點選b的時候不觸發，那麼可以使用on，程式碼如下：

$("#parent").on("click","#a",function(){
    alert($(this).attr("id"));
});

可以看到：on()函式的引數selector就是為了在事件冒泡的時候，讓父元素能夠過濾掉子元素上發生的事件。如果使用了bind，那麼就沒有這個能力，子元素上發生的事件一定會觸發父元素事件。

---------------------  以上程式碼來源：https://blog.csdn.net/aitangyong/article/details/43673535