簡介

最近了解到很多網頁開發者對jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。這些疑惑通常是關于它們之間真正的區別是什么啊，什么時候該使用它們啊。下面本文將給大家詳細介紹這四個方法之間的區別，分別對每個方法都進行了詳細的介紹，話不多說，來一起看看詳細的介紹：

在我們深入了解這些方法之前，我們先來一段常見的的HTML，作為我們編寫jquery示例方法使用的樣本。

<ul id="members" data-role="listview" data-filter="true"> <!-- ... 其他li ... --> <li> <a href="detail.html?id=10" rel="external nofollow" >  <h3>John Resig</h3>  <p><strong>jQuery Core Lead</strong></p>  <p>Boston, United States</p> </a> </li> <!-- ... 其他li ... --></ul>

使用Bind方法

.bind()方法將事件類型和一個事件處理函數直接注冊到了被選中的DOM元素中。這個方法被使用得最久,在此期間,它很好的解決了各種跨瀏覽器的問題。當使用它來連接事件處理函數時,它仍然非常簡潔,但是也存在著一些性能方面的問題,將在下面羅列出來。

/* .bind() 方法將事件類型和一個事件處理函數直接注冊到了被選中的DOM元素中。  .click() 方法只是.bind() 方法的簡寫。*/$( "#members li a" ).bind( "click", function( e ) {} ); $( "#members li a" ).click( function( e ) {} ); 

.bind()方法將會把事件處理函數連接到所有匹配的a標簽。這種方式并不好。這樣做的話，它不僅在所有匹配的元素中隱含地迭代附加事件處理函數，而且這些操作非常浪費（多余），因為這些相同的事件處理函數是被一遍一遍的重復的添加到所有匹配的標簽上。

優點:

缺點:

使用Live方法

.live()方法使用了事件委托的概念來實施其所謂的“魔法”。你調用live()方法的方式就像是調用bind()方法那樣方便。然而在這表面之下， .live()方法與前者的實現方式大不相同。 .live()方法將與事件處理函數關聯的選擇器和事件信息一起附加到文檔的根級元素（即document）。通過將事件信息注冊到document上，這個事件處理函數將允許所有冒泡到document的事件調用它（例如委托型、傳播型事件）。一旦有一個事件冒泡到document元素上，Jquery會根據選擇器或者事件的元數據來決定哪一個事件處理函數應該被調用，如果這個事件處理函數存在的話。這個額外的工作將會在用戶交互時對性能方面造成一定的影響，但是初始化注冊事件的過程相當地快。