jQuery插件 -- 動態事件綁定插件jquery.livequery.js

動態事件綁定插件livequery, 可以利用它給相應的DOM元素註冊事件或者觸發回調函數。不僅當選擇器匹配的元素會被綁定事件,而且後來通過JavaScript添加的元素都會被綁定事件。當元素不再和選擇器匹配時,livequery會自動取消事件註冊,使得開發者不再需要關注HTML元素的來源,只需要關注如何編寫其綁定的事件即可

通過jQuery選擇器選擇一個DOM元素,livequery插件會實時地在整個DOM範圍將其持久化。這意味着無論元素是先前存在的還是後來動態加載的,事件都會被綁定,就像是CSS給元素添加樣式一樣。同時,這款插件幾乎在沒佔用什麼資源的情況下就做到了這些功能

livequery下載地址: http://plugins.jquery.com/project/liveQuery

使用方法:

1.引入jquery.livequery.js

<script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="scripts/jquery.livequery.js" type="text/javascript"></script>
2.通過livequery動態綁定事件

$(document).ready(function(){
   $('a').livequery('click', function() {
        alert('livequery導致的點擊');
        return false;
    });
    $("body").append('<p><a href="#">超鏈接B</a>');
    $("body").append('<p><a href="#">超鏈接C</a>');
});
livequery插件還可以爲匹配的元素觸發一個回調函數,當不再匹配這個元素時,觸發另外一個回調函數

$('li').livequery(function(){
   // 使用hover函數 綁定mouseover和mouseout事件
   $(this).hover(function() {
      $(this).addClass('hover');
   }, function() {
      $(this).removeClass('hover');
   });
   }, function(){
      // 解除綁定mouseover和mouseout事件
      $(this)
         .unbind('mouseover')
         .unbind('mouseout');
}); 
利用livequery插件來註冊其他插件

if(jQuery.livequery)
   jQuery.livequery.resisterPlugin("method1", "method2", "method3");

與jQuery1.3中新增的 live(type, fn) 方法區別:

1.live也能給當前以及將來會匹配的元素綁定一個事件處理函數(使用委派方式),也能綁定自定義事件。但是目前支持的事件有click/dblclick, mousedown/up/move/over/out, keydown/press/up, 還不支持的事件有 blur/focus, mouseenter/leave, change, submit
2.live 方法不支持livequery提供的“無事件”樣式的回調函數,live只能綁定事件處理函數
3.live 方法沒有 “setup” 和 “cleanup” 的過程, 因爲所有的事件是委派而不是直接綁定在元素上的 


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章