jquery基礎(chǔ)之事件操作詳解_jquery

《jquery基礎(chǔ)之事件操作詳解_jquery》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、Jquery基礎(chǔ)之事件操作詳解事件是用戶操作時頁面或頁面加載時引發(fā)的用來完成javascript和HTMLZ間的交互操作。常見的元素點擊事件、鼠標(biāo)事件、鍵盤輸入事件等，較傳Javascript相比JQuery壇加并擴展了基本的事件處理機制，極大的增強了事件處理的能力。一、DOM加載事件頁面加載完畢后瀏覽器會通過javascript為Dom元索加載事件，使用Javascript時候使用的是window,onload方法，而Jquery使用的是$(document).ready()方法，下表展示兩個事件

2、的異同。window.onload方法$(documeiit)?ready()方法執(zhí)行時機必須等待所有內(nèi)容加載完成后才能執(zhí)行頁面的DOM兀素繪制完成后可以執(zhí)行不必等待全部內(nèi)容加載完成。綁定函數(shù)個數(shù)該方法能夠綁定一個函數(shù)，如果綁定多個只能執(zhí)行最后的一個綁定。例：window.onload=function(){alerwindow.onload二function。{aler執(zhí)行結(jié)果只執(zhí)行最后綁定的函數(shù)結(jié)果是打?。?.能夠注冊多個函數(shù)，按綁定順序執(zhí)行綁定函數(shù)。例：$(document)?ready(fu

3、ntction(){alert$()?ready(function(){alert(〃2〃)汀);執(zhí)行結(jié)果是順序執(zhí)行綁定的函數(shù)：先打印1?然后再打印2.簡化寫法無$().ready();$.ready()二、事件處理當(dāng)文件加載完成后就可以為元素添加事件處理，進而事件執(zhí)行某些動作完成相關(guān)操作。jquery中有多種事件處理方法，主要有bind()>one()、unbind()、live()、trigger()>triggerHander()等。Jquery方法使用bind()方法為匹配的元素進行特定的事

4、件綁定。bind()方法格式如下：bind(type,[data],fun);bind()方法有三個參數(shù)，各個參數(shù)說明如下：第一個參數(shù)是事件類型，主要如卜:blur、focus、load、resizc>scroll、unload、click>dbclick>mousedown>mouseup、mousemove>mouseover、mouseout>mouseenter>mouseleave>change>select、submit、keydown>keypress>keyup和error等。也可以

5、是自定義名稱，Jquery中的事件綁定類型比javascript少了〃on〃，因此jquery中事件click對應(yīng)javascript中的onclick函數(shù)。第二個參數(shù)是可選參數(shù)，作為event,data屈性值傳遞給事件對彖的額外數(shù)據(jù)對象。第三個參數(shù)是用來綁定的處理函數(shù)。為按鈕綁定單擊事件示例：〈inputtype二〃button"id二〃btnl〃value二〃單擊〃〉$(〃#btnl〃)?bind("click",function(){alertC單擊事件綁定")；})；bind()方法為元素綁

6、定的事件一直冇效直到unbind()方法或者刪除元素。如果想要綁定事件只能執(zhí)行一次就要使用one()方法綁定事件。one()同bind()方法一樣，區(qū)別在于one()方法綁定的事件只能執(zhí)行一次。為按鈕綁定一次性事件示例：

7、ind([type],[data])unbind()方法是元素bind()方法的反向操作，從每個匹配的元素小刪除綁定的事件。當(dāng)沒冇參數(shù)時候刪除所冇的綁定事件。如果提供了事件類型的參數(shù)則刪除指定的綁定事件。如果指定了事件類型，第二個參數(shù)指定了函數(shù)名稱則刪除事件類型屮與第二個參數(shù)名稱對應(yīng)的事件。示例:〈inputtype二〃button"id二〃btnl"value二"click"/>〈inputtype二〃button"id二〃btn2〃value二"removeBind〃/>$(〃#btnl〃)?b

8、ind("click",funl=function(){alert(，z事件1〃);});$(〃#btnl〃).bind("click",fun2=function(){alertC事件2〃)；});$(〃#btn2〃)?bind("click",function(){$C#btnl〃)?unbind("click",fun2);})；該示例使用unbind0方法的二個參數(shù)形式移除第二次綁定的事件處理函數(shù)。liveO方法為元素動態(tài)綁定事件，使用該方法綁定事件后，新加對