一直不是很理解幾種js事件繫結之間的區別與聯絡，今天百度了一下，在此做一總結：

1.如果只是簡單的繫結一個事件，可以直接寫在行內，點選執行一個函式，例如 <button onclick="alert('點我啊!')">點我啊</button>

2.也可以設定一個id 例如<button id="btn">點我啊</button><br>

$('#btn').click(function(){

})

3.還可以寫成這種格式，點選執行函式，但是函式寫在外面，例如  btn1.onclick = demo; function demo(){ alert('打你幹嗎?'); }

其實以上三種本質應該是一種，只是形式不一樣

對於多事件的繫結，我用的最多的就是on() 和 bind(),一下介紹一下它們的區別

on的基本語法：on(events,[selector],[data],fn)

events:一個或多個用空格分隔的事件型別和可選的名稱空間，如"click"或"keydown.myPlugin" 。
selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇器為null或省略，當它到達選定的元素，事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函式。
fn:該事件被觸發時執行的函式。 false 值也可以做一個函式的簡寫，返回false。

如果只是一個簡單的事件繫結如 $('button').on('click',function(){}); 與bind()無二樣，與以上的幾種方式也沒有太多的區別

如果是多個事件繫結到一個函式，或則多個事件繫結到多個函式，就需要用到on了：

多個事件一個函式：

$(document).ready(function(){
  $("p").on("mouseover mouseout",function(){
   alert("多個事件一個函式");
  });
});

多個事件繫結不同的函式

$(document).ready(function(){
  $("p").on({
    mouseover:function(){$("body").css("background-color","lightgray");},  
    mouseout:function(){$("body").css("background-color","lightblue");}, 
    click:function(){$("body").css("background-color","yellow");}  
  });
});

on的第二個引數可以阻止一些情況下的冒泡，原理簡單說就是用選擇器來精確到匹配到你想執行函式的那個元素,而bind()就沒有這個引數，因此在使用bind()時很可能產生冒泡

很多資料上顯示：bind() live() delegate()都是通過.on()來實現的，雖然不是很懂，但是在使用中我也是更喜歡使用on()