我們知道jquery提供了四種事件監聽方式，分別是bind、live、delegate、on,下面就分別對這四種事件監聽方式分析。

已知有4個列表元素:

　　列表元素1

　　列表元素2

　　列表元素3

 　　列表元素4

1.bind

bind(type,[data],function(eventObject))  bind是使用頻率較高的一種，作用就是在選擇到的元素上繫結特定事件型別的監聽函式，

引數函式如下：

type:事件型別，如click、change、mouseover等；

data:傳入監聽函式的引數，通過event.data取到；

function:監聽函式，可傳入event物件，這裡的event是jquery封裝的event物件。

原始碼:

bind: function( types, data, fn ) {

return this.on( types, null, data, fn );

}

可以看到內部是呼叫了on方法。

bind的特點就是會把監聽器繫結到目標元素上，有一個邦一個，在頁面上的元素不會動態新增的時候使用它沒有什麼問題。

但如果列表中動態增加一個“列表5”，點選它是沒有反應的，必須再bind一次才行。

測試程式碼：

			$(function(){
			$('div').bind('click',function(){	
				if($(this).text()=='列表4'){
					$(this).after('<div>列表5</div>');
				}
				alert($(this).text());


			})
		})
 

2.live

live(type, [data], fn)

live的引數和bind一樣，它又有什麼蹊蹺呢，我們還是先瞄一眼原始碼：

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

可以看到live方法並沒有將監聽器繫結到自己(this)

通過 live() 方法新增的事件處理程式適用於匹配選擇器的當前及未來的元素（比如由指令碼建立的新元素）,

使用事件委託的優點一目瞭然，新新增的元素不必再繫結一次監聽器。

將上面程式碼中的bind改為live後，點選列表5就可以彈出“列表5”了。

注意：live方法在在 jQuery 版本 1.7 中被廢棄，在版本 1.9 中被移除，官方建議使用on代替。

測試程式碼：

	$(function(){
			$('div').live('click',function(){	
				if($(this).text()=='列表4'){
					$(this).after('<div>列表5</div>');
				}
				alert($(this).text());
			})
		})

原始碼:     delegate: function( selector, types, data, fn ) {       

 return this.on( types, selector, data, fn );    

}
delegate() 方法為指定的元素（屬於被選元素的子元素）新增一個或多個事件處理程式，

並規定當這些事件發生時執行的函式。
這下，我們的選擇又多了一些靈活性，不單可以利用事件委託，還可以選擇委託的物件。
程式碼，實現效果，點選div，兩個p標籤的文字顏色都發生變化。

<div>
		<p>div內的p標籤</p>
	</div>
	<p>div外的p標籤</p>
		$(function(){
			$('div').delegate('p','click',function(){	
				$('p').css('color','blue');
				
			});

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。
程式碼，實現效果同上，把delegate改為on，第一個引數為click，第二個引數p可寫可不寫，第三個引數同上。

	$(function(){
			$('div').on('click','p',function(){	
				$('p').css('color','red');	
			});