本文例項講述了jquery繫結事件 bind和on的用法與區別。分享給大家供大家參考，具體如下：

bind和on都是給元素繫結事件用的,其最大的區別就是事件冒泡

事件冒泡也是委託事件的原型，事件委託就是子類的事情委託給父類的去做

最直觀的區別就是on繫結比bind繫結多一個引數'childSelector'

語法

$(selector).on(event,childSelector,data,function)

引數	描述
event	必需。規定要從被選元素移除的一個或多個事件或名稱空間。 由空格分隔多個事件值，也可以是陣列。必須是有效的事件。
childSelector	可選。規定只能新增到指定的子元素上的事件處理程式（且不是選擇器本身，比如已廢棄的 delegate() 方法）。
data	可選。規定傳遞到函式的額外資料。
function	可選。規定當事件發生時執行的函式。

$(selector).bind(event,function,map)

引數	描述
event	必需。規定新增到元素的一個或多個事件。 由空格分隔多個事件值。必須是有效的事件。
data	可選。規定傳遞到函式的額外資料。
function	必需。規定當事件發生時執行的函式。
map	規定事件對映 ({event:function,event:function,...})，包含要新增到元素的一個或多個事件，以及當事件發生時執行的函式。

• bind只能給符合條件的元素本身新增事件
• on可以將子元素的事件委託給父元素進行處理,而且可以給動態新增的元素加上繫結事件

也就是對於新新增的元素如果是on繫結,符合條件的新元素也會繫結事件,

如果是bind則不影響新元素

比如下例:

<ul>
  <li>第一個子元素<li/>
  <li>第二個子元素<li/>
  <li>第三個子元素<li/>
</ul>

我們想給所有li新增click事件,可以用on:

$('ul').on('click','li',function () {
    console.log($(this).text());
});

也可以用bind:

$('ul li').bind('click',function () {
    console.log($(this).text());
});

有什麼區別呢?

第一用on繫結實際上是委託給了父級ul,也就是隻給 一個元素綁定了事件

第二個是用選擇器選擇了ul下的所有li元素 依次綁定了事件

假如有很多很多子元素區別就很大了,bind會嚴重影響效能!

假如這時候新添一個li:

$('ul').append('<li>第四個子元素<li>');

• 如果是on繫結則這個li也會有點選事件
• 如果是bind則沒有

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。