jquery動態新增點擊事件步奏詳解

這次帶給大家jquery動態新增點擊事件步奏詳解，jquery動態加入點擊事件的注意事項有哪些，以下就是實戰案例，一起來看一下。

當我們試著綁定一些事件到DOM元素上的時候，通常會使用以下的四個方法
bind(),on(),live( ),delegate()大家應該用的較多的是前兩種方法。以下是我對四種方法的理解：

• Bind()： .bind()是最直接的綁定方法，會綁定指定函數和事件到DOM上，這種方法很好的解決了瀏覽器在事件處理中的相容問題，但這個方法還有一些問題。程式碼：

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

上面的兩行程式碼完成的任務都是一樣的，就是把event handler 加到全部符合的a元素上。這裡存在著一些效率方面的問題，一方面，我們隠式地吧點擊事件加到了所有的a標籤上，這個過程是昂貴的；另一方面在執行的時候也是一種浪費，因為他們都是做了同一件事卻執行了很多次（我們可以把它們hook到它們的父元素，透過冒泡可以對它們中的每一個進行區分，然後在執行這個event handle）。
優點

• 這個方法提供了一個在各種瀏覽器之間對事件處理的兼容性解決方案

• 非常方便的綁定事件到元素上

• .click(), .hover()...這些非常方便的時間綁定，都是bind的一種簡化處理方式

• 對於利用ID選出來的元素是非常好的，不僅僅是很快的可以hook上去（頁面只能有一個id），而且當事件發生時，handler可以立即被執行（相當於後面的live，delegate）實作方式

缺點

• ##它會綁定事件到所有被篩選出來的元素上

• 它不會綁定到在它執行完成後動態新增的那些元素上

• #當被篩選出來的元素很多時，會出現效率問題

• 當頁面載入完成的時候，才可以進行bind()，所以可能產生效率問題。

---

.live().live()方法用到了事件委託的概念來處理事件的綁定。它和用.bind()來綁定事件是一樣的。 .live()方法會綁定對應的事件到你所選擇的元素的根元素上，也就是在
document元素上。那麼所有透過冒泡上來的事件都可以用這個相同的handler來處理了。它的處理機制是這樣的，一旦事件冒泡到document上，jQuery將會找selector/event metadata,然後決定那個handler應該被呼叫。不過在最新的jquery版本好像被刪掉了。

$( "#members li a" ).live( "click", function( e ) {} );

優點：

• 這裡僅有一次的事件綁定，綁定到document上而不像.bind()那樣給所有的元素挨個綁定

• 那些動態添加的elemtns依然可以觸發那些早先綁定的事件，因為事件真正的綁定是在document上

• 你可以在document ready之前就可以綁定那些需要的事件

缺點：

# #從1.7開始已經不被推薦了，所以你也要開始逐步淘汰它了。
Chaining沒有被正確的支援
#當使用event.stopPropagation()是沒用的，因為都要到達document
#因為所有的selector/event都被綁定到document,
•  所以當我們使用matchSelector方法來選出那個事件被呼叫時，會非常慢

  
  

#當發生事件的元素在你的DOM樹中很深的時候，會有performance問題

---

.Delegate()
.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.推荐使用.delegate() 代替.live()

$( "#members" ).delegate( "li a", "click", function( e ) {} );

优点：

• 你可以选择你把这个事件放到那个元素上了 chaining被正确的支持了

• jQuery仍然需要迭代查找所有的selector/eventdata来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。

• 可以用在动态添加的元素上

缺点：

• 需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。

---

.On()
其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：

$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 
// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

优点：

• 提供了一种统一绑定事件的方法

• 仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

• 也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

• 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

• 不要再用.live()了，它已经不再被推荐了，而且还有许多问题

• .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

• 我们可以用.on()来代替上述的3种方法

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS选择器使用方法总结

webkit-font-smoothing字体抗锯齿渲染使用案例详解

以上是jquery動態新增點擊事件步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！