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...