這次帶給大家jquery動態新增點擊事件步奏詳解,jquery動態加入點擊事件的注意事項有哪些,以下就是實戰案例,一起來看一下。
當我們試著綁定一些事件到DOM元素上的時候,通常會使用以下的四個方法bind(),on(),live( ),delegate()
大家應該用的較多的是前兩種方法。以下是我對四種方法的理解:
$( "#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)實作方式
缺點
.live().live()方法用到了事件委託的概念來處理事件的綁定。它和用.bind()來綁定事件是一樣的。 .live()方法會綁定對應的事件到你所選擇的元素的根元素上,也就是在
document元素上。那麼所有透過冒泡上來的事件都可以用這個相同的handler來處理了。它的處理機制是這樣的,一旦事件冒泡到document上,jQuery將會找selector/event metadata,然後決定那個handler應該被呼叫。不過在最新的jquery版本好像被刪掉了。
$( "#members li a" ).live( "click", function( e ) {} );
優點:
缺點:
.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中文网其它相关文章!
推荐阅读:
webkit-font-smoothing字体抗锯齿渲染使用案例详解
以上是jquery動態新增點擊事件步奏詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!