JQuery四 JQuery事件常用方法

2021-06-19 21:48:21 字數 4914 閱讀 6680

1.$(selector).event(handler);

2.$(selector).bind(event[,data],handler(eventobject));    //event可以設定多個事件,用空格隔開;data為json格式的字串,在方法中可以用eventobject.data.argname方式來使用。

$(selector).bind(,event2:handler2(){},....});   //繫結多個事件

$(selector).bind(event[,data],preventbubble);  //preventbubble如果為false則取消事件預設處理並停止傳遞該事件到其上級元素,等同handler裡面返回false,預設為true

$(selector).unbind(event[,handler(eventobject)]);    //取消通過bind繫結事件handler

3. $(selector).live(events[,data],handler(eventobject));  //繫結handler到selector對應的元素上面,包括後來動態新增的符合條件的元素,在jquery1.9中被刪除。

$(selector).die(events[,handler(eventobject));  //刪除通過live繫結的事件處理handler

備註:

a.live並不直接繫結handler到具體的符合條件的元素事件上,而是繫結到html文件根document上面,在事件廣播到根部document上的時候,會檢驗事件廣播路徑中元素是否符合條件,如果符合則呼叫其handler,從live處理機制可以看出能夠支援執行時動態新增的符合條件的元素。

b.呼叫live方法效率低下,主要有兩點:一是在呼叫live方法的時候系統會掃瞄並記錄document下面所有符合條件的元素,如果文件過大會導致記憶體消耗過大且效率低下,第二是handler預設繫結到document,所以事件廣播到根部的時候才能夠執行,事件響應時間過長。

c.如果事件廣播到根部過程如果某個元素處理handler中呼叫了eventobject.stoppropagation或者返回false,則會中斷事件廣播,最終導致document接收不到event而沒有執行handler,從另外乙個方面來說,在live繫結的handler中返回false或者呼叫eventobject.stoppropagation除了去除預設處理外也達不到終止廣播的意圖,因為該事件已經傳遞到根部document上。

d.在大部分的移動系統上面並不支援事件廣播到根部document級別上面,所以使用live也會失效。

e.live不支援方法鏈,如$( "a" ).find( ".offsite, .external" ).live( ... )不會有效。

f.live會與其他事件繫結方法相互干擾,例如off方法也會取消通過live繫結的事件處理。

4. $(container).delegate(childselector,eventtypes[,eventdata],handler(eventobject));  //繫結子元素的事件與處理handler,支援動態新增元素。

$(contianer).undelegate(childselector,eventtypes);  //取消通過delegate的繫結處理。

備註:

delegate與live處理機制相似,但改進了一些live方法的弊端,主要體現在下面幾點不同上面:

a.delegate並不繫結到document上,而是container上面,所以其效率及響應時間會優於live.

b.delegate在呼叫的時候並不登記及掃瞄文件中符合條件的子元素,只是在接受到事件的時候才會檢驗。

除了上面兩點外live其它的問題delegate同樣存在,例如eventobject.stoppropagation的呼叫等等。

5. $(selector).on(event[,childselector][,data],handler(eventobject));   

$(selector).off(event[,childselector][,handler(eventobject));   //取消on方法繫結的handler

備註:on是最新版本的事件繫結方法,整合了所有的事件繫結方法(bind,live,delegate) 

沒有引數childselector則等同於bind方法,如果存在引數childselector則等同於delegate方法

6.$(selector).one(event[,childselector][,data],handler(eventobject));   //用法同on,唯一區別是繫結的每個元素每個事件其handler最多只能執行一次,執行後其事件不再有效。

7.$(selector).toggle(handler(eventobject),handler(eventobject)[,handler(eventobject));  //繫結兩個或者多個handler到click事件,當click元素的時候這些handler輪詢執行(在js1.9後該方法被刪除,不被支援)。

8. $(selector).trigger(event[,extraparameters]);  //觸發selector對應元素的event事件。

//定義及觸發自定義事件示例  

var event = jquery.event("logged");

event.user = "foo";

event.pass = "bar";

$( "body" ).trigger( event );

//或者下面方法

$( "body" ).trigger();

9 $(selector).triggerhandler 用法同trigger,但是與trigger有如下差異:

a.triggerhandler不會觸發事件的預設處理,例如focus,form submit等等。

b.trigger會執行所有與selector匹配上的元素對應事件,但是triggerhandler僅僅觸發第乙個匹配上元素對應事件

c.triggerhandler僅僅觸發與元素直接繫結的事件,而不會考慮dom樹傳遞事件,也就是說通過live及delegate繫結的事件是不會被執行的。

d.handler返回引數處理方式不一樣。

10. event物件

(1), 建立事件物件:var eventobj = jquery.event("click"[,]); //傳遞事件的特殊屬性。

(2). 觸發事件:$(selector).trigger(eventobj);

(3). currenttarget, delegatetarget, target三屬性區別:currenttarget指定是與當前執行handler對應的元素,delegatetarget指的是事件繫結元素,target指定的是觸發事件最原始的元素,也就是事件根源屬性,及dom鏈中最深最底層元素。如果通過bind方法繫結的event,則currenttarget與delegatetarget相同,如果是通過live繫結的事件則其delegatetarget則為document,currenttarget則為selector對應的正在執行的子元素。

舉例如下:

click me!

$(body).delegate("click","p#plparent",function(eventobj){

console.log("current target:"+eventobj.currenttarget.id);   //輸出:plparent

console.log("delegate target:"+eventobj.delegatetarget.id); //輸出:div1

console.log("target:"+eventobj.target.id);  //輸出:lb

(4). event.data:觸發事件通過json字串方式傳遞進來的附加屬性。

(5). event.namespace:被觸發事件的命名空間,例如 trigger("click.mynamespace"),其命名空間為mynamespace。

(6). event.pagex, event.pagey:觸發事件時候滑鼠相對於document(或者iframe)的位置(注意是document而不是事件源頭元素)

(7). event.preventdefault():禁止事件預設處理操作執行,例如click操作的預設操作是跳轉到其它指定的頁面。

event.isdefaultprevented():判斷preventdefault()方法是否被呼叫。

(8). event.stopimmediatepropagation():除了阻止當前執行元素繫結的其他handler執行外,還禁止事件到廣播到上層元素。

event.isimmediatepropagationstopped():判斷方法stopimmediatepropagation()方法是否被執行。

(9). event.stoppropagation():阻止事件廣播到上層元素,與stopimmediatepropagation的區別在於不禁止當前元素的其它handler執行。

event.ispropagationstopped():判斷方法stoppropagation是否被執行。

(10).event.result:觸發事件元素的最後一次handler返回值,如果沒有返回則為undifined. 

(11).event.type:事件型別,如」click"等。   

10.其它一些名稱:

直接事件/**事件(direct/delegate event)

事件名字及命名空間(event name and namespace) 

jQuery學習筆記四(jquery事件註冊)

原生js註冊相同的事件之後,後面註冊的會覆蓋掉前面註冊的,而jquery事件,後面註冊的不會覆蓋前面註冊的,這增強了事件處理能力。jquery的隱式迭代 jquery中如果選擇器可以找到零個,乙個或多個元素找到多個元素 當找到的是多個元素的時候,得到的實際上是乙個元素的集合,執行設定操作的時候,會對...

JQuery的事件方法(四)

jquery除了鍵盤 滑鼠 頁面的觸發條件,還有一種是文件觸發條件,這些只是jquery為了使開發者更加方便的繫結事件,jquery封裝了常用的事件以節約更多的 這就叫簡寫事件 一 change 事件 語法 selector change 觸發被選元素的change事件 selector chang...

jQuery1 7系列四 事件

宣告 寫部落格,是對自身知識的一種總結,也是一種分享,但由於作者本人水平有限,難免會有一些地方說得不對,還請大家友善 指出,或致電 tianzhen.chen0509 gmail.com 關注 國內開源jquery ui元件庫 operamasks ui jquery版本 v1.7.1 jquery...