1. 程式人生 > >jQuery外掛 -- 動態事件繫結外掛jquery.livequery.js

jQuery外掛 -- 動態事件繫結外掛jquery.livequery.js

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

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

使用方法:

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” 的過程, 因為所有的事件是委派而不是直接繫結在元素上的 


相關推薦

jQuery外掛 -- 動態事件外掛jquery.livequery.js

動態事件繫結外掛livequery, 可以利用它給相應的DOM元素註冊事件或者觸發回撥函式。不僅當選擇器匹配的元素會被繫結事件,而且後來通過JavaScript新增的元素都會被繫結事件。當元素不再和選擇器匹配時,livequery會自動取消事件註冊,使得開發者不再需要關注H

jQuery動態元素事件的方式

在使用jQuery的方式為元素繫結事件時,我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時,顯然以上幾種繫結事件的方式是無效的,具體寫法如下圖。 $(selector).bind(event

Jquery封裝之----事件(一)

在今天的部落格中,有些問題比較突出,所以要多多注意 一.問題所在 現代繫結中W3C 使用的是:addEventListener 和removeEventListener。IE 使用的是 attachEvent 和detachEvent。我們知道IE 的這兩個問題多多,並且伴隨記憶體洩漏。所以,解 決這些問題非

JQuery-02】事件多次造成多次執行

問題描述:必現。先刪除A記錄,再新增A記錄,再刪除B記錄時,會連同AB一起刪除。 原因: 在彈出確認是否刪除的對話方塊中,註冊的事件{記錄id,如果點選確定則刪除該id對應的記錄;},該modaldialog一直在dom中,每刪除一次就會繫結一次。 A已經被

jQuery四種事件方式.bind(),.live(),.delegate(),on()的區別

.bind(), .live(), 和 .delegate()之間的區別並不明顯。但是理解它們的不同之處有助於寫出更簡潔的程式碼,並防止我們的互動程式中出現沒有預料到的bug。 基礎 DOM樹 首先,圖形化的HTML文件能幫助我們更好的理解。一個簡單的HTML頁面

jQuery1.7+如何實現動態事件

.on( events [, selector ] [, data ], handler(eventObject) ) data 型別: Anything 當一個事件被觸發時,要傳遞給事件處理函式的event.data。 <button class="num1">點選

jquery動態新增事件

jquery動態新增繫結事件 場景:在使用jquery的方式為元素繫結事件時,我經常使用bind或者click,但這隻能為頁面已經載入好的元素繫結事件。像需要用ajax的方式請求遠端資料來動態新增頁面元素時,顯然以上幾種繫結事件的方式是無效的。 解決方案: 1.7之後也就是1.8開始,就

jQuery動態增加刪除li及事件

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文件</tit

Jquery通過append新元素之後事件問題的解決方案:

1、 重複繫結 (DOM載入時,先對DOM中存在的元素進行事件繫結,每次新增的元素時,再對新增元素繫結一次事件) 2、 直接在標籤上新增onclick屬性 3、 事件委託 4、 如果元素是用click事件append進來的,那麼功能函式必須放在這個click事件裡面; 具體程式碼不表,

jquery事件的幾種用法

常見的事件繫結的幾種方法 主要有on(),bind(),live(),delegate(),隨著版本的不斷更新,live(),bind(),delegate()被相繼棄用。live():1.7版本之後被棄用bind()、delegate():3.0版本之後被棄用雖然在3.0之後的版本中有bind和deleg

jQuery事件以及解綁

jquery 事件繫結的四種方式 事件繫結 4種方式 1.click… 2.bind 1.7版本以後用on代替了 3.delegate 4.on 1. $("li").click(function () {//常用,但是優缺點 新創建出來的不會被繫結 alert("我是一個點選"); }

jQuery基礎事件

學習要點: 1.繫結事件 2.簡寫事件 3.複合事件 JavaScript有一個非常重要的功能,就是事件驅動。當頁面完全載入後,使用者通過滑鼠 或鍵盤觸發頁面中繫結事件的元素即可觸發。jQuery為開發者更有效率的編寫事件行為,封 裝了大量有益的事件方法供我們使用。

jQuery(八)事件

on()方法 說明:方法在被選元素及子元素上新增一個或多個事件處理程式。 語法:$(selector).on(event,childSelector,data,function) event:必需。規定要從被選元素移除的一個或多個事件或名稱空間。由空格分隔多個事

jQuery 新新增元素事件無效

  jQuery中事件繫結,大多使用on就足夠了。 但是對於新新增的元素 on 的繫結事件 會不起作用。 因為 append 中的 節點是在整個文件載入之後才新增的,頁面並不會為未來的元素初始化新增點選事件,因此 這種方式新增的 節點的點選事件是無效的。 解決方法: 事件委託。事件委託就是

JQuery事件函式中的bind,live,delegate,on的差別?

bind:把事件繫結到每一個匹配的元素上,主要特點 1.相容性比較好 2.繫結事件到所有選出來的元素上 3.不會繫結事件到動態新增的那些元素上 4.當元素很多時,會出現效率問題,特別是巢狀層次比較深的元素。 html程式碼 <ul id="ul">

利用JQuery+Ajax實現aspx頁面無重新整理的動態資料

                好長的名字啊!自己看得都覺得累了……廢話到此為止,開始正文:  我們在寫asp.net網頁的時候,會用到很多需要資料繫結的控制元件。Asp.net提供了資料繫結這一特性,確實方便了很多。但是這樣的繫結都是在伺服器端完成的,而我們有時會希望根據使用者的選擇來動態的更新其它一些控制

jQuery原始碼-事件函式bind/delegate/click...

 前言:我用的jQuery版本為v2.0.1,jQuery繫結事件的介面有bind/delegate/click等其他方法,但是他們最終呼叫的還是this.on作為入口 但是jQuery提供兩種繫結機制 1.普通事件繫結 2.委託繫結事件 這兩中的區別有很大的不同,只是在作

jquery事件.on()、解綁事件off()用法詳解

jquery1.4 及之前的版本,由.click() 或 .bind()方法繫結的事件,不能適用指令碼建立的新元素:即是說頁面載入完成後,再動態建立的DOM元素並不能響應之前繫結的事件! 舊版本的處理方法是使用.live()方法來代替事件繫結.bi

jquery on()事件

$("#test1").on('click', function(e) { $(this).text('觸發事件:' + e.type) }) $("#test2").on('mousedown mouseup', function(e)

JQuery事件事件委託

1、事件委託與事件繫結概念 事件繫結:將普通的事件event繫結在DOM節點上,當DOM節點被選中時,將事件與之繫結,方便使用者提供相應的操作。比如:在button按鈕上繫結click滑鼠事件,在input中繫結focusin焦點事件等等,具體的例如:常常在