jquery中的事件處理詳細介紹_jquery

1.頁面載入完畢回應事件
所謂頁面載入完畢是指DOM元素載入就緒了,能夠被讀取和操作了。
①jQuery中的$(doucument).ready()事件
ready(fn)是jQuery事件模組中最重要的一個函數。這個方法可以看作是對window.onload註冊事件的替代方法。透過使用這個方法,可以在DOM載入就緒時立刻調用所綁定的函數,而幾乎所有的javaScript函數都是需要在那一刻執行。
ready(fn) 傳回值:Object 參數-fn:要在DOM載入就緒時執行的參數Function 當DOM載入就緒時綁定一個要執行的函數
而它有一種很簡單的縮寫形式$(document).ready(function(){}) => $(function(){})
②window.onload()事件與$(document).ready()事件的比較
window. onload()=function(){}
如果使用多個window.onload(),則只有最後一個綁定的函數能被執行,它將覆蓋前面所有window.onload()綁定的函數。
如果使用多個$(),則它們都能被執行。
需要注意的是如果 body標籤的onload事件已經註冊了某個函數則$()事件註冊的函數將不會被執行

2.綁定與反綁定事件監聽器
①綁定事件
⑴bind(type,[data],fn)函數
就是將某函數與某元素的某事件綁定在一起$(" #id").click(function(){})就是將一個匿名函數與id元素的click事件綁在一起
但上面的例子其實只是縮寫形式,因為其是簡單常用的事件綁定,正規寫法應如下:
$("#id").bind("click",[data],function(){})
bind(type,[data],fn) 傳回值:Object 參數- type:事件類型String data:可選,作為event.data屬性值傳遞給後面fn的實參Object fn:綁定到事件上的函數Function
⑵為處理函數傳遞參數
這裡用到bind ()函數的第二個參數及event.data屬性為fn函數傳遞參數

複製程式碼 程式碼如下:

$("#Text2").bind("click",{first:"1",second:"2"} ,function(event){
if(event.data.first=="1"){$(this).val("歡迎光臨")}
if(event.data.second=="1 "){$(this).val("")}
});
})

第二個參數為一個json物件,在fn函數中透過event. data透過鍵名獲得參數值
⑶阻止瀏覽器預設的行為
有時bind綁定的函數會與瀏覽器預設的操作衝突,這時如果想阻止瀏覽器預設的操作,只需在fn後面加一句return false;

複製程式碼 程式碼如下:

$("form") .bind("submit",function(){return false;})

②反綁定事件
就是解除與某元素的某事件綁定在一起的某函數
unbind([type],[fn名]) 傳回值:Object 參數-type:事件類型String fn名:要被解除綁定的函數名稱Function
以上兩個參數都是可選參數如果參數為空,就是解除所有符合元素的所有事件所綁定的函數

複製程式碼 程式碼如下:

$(function(){$("#btn1").click(function(){
$("input[type=text]").unbind()})
})

點擊btn1後,解除所有為type=text文字方塊的事件綁定的所有函數
③一次性的事件綁定
就是為某元素的某事件所綁定的某函數只能被執行一次
one(type,[data],fn) 傳回值:Object 參數-type:事件類型String data:可選,作為event.data屬性值傳遞給後面fn的實參Object fn:綁定到事件上的函數Function
使用與bind()函數一致,不同之處就是one裡的fn只能被執行一次。

3.事件觸發器
上述綁定的一些函數,需要用戶執行一定的操作才會被執行,如click事件綁定的函數需要用戶單擊相應的元素才會被執行。但事件觸發器可以用程式碼模擬使用者的操作動作進而執行事件所綁定的函數,而不需要使用者進行某些操作。
trigger(type,[data]) 傳回值:Object 參數-type:事件類型String data:可選,傳遞給觸發的事件所綁定的函數的實參Array(是一個javascript數組) 觸發所匹配的元素的某類事件所綁定的所有函數,當這類事件與瀏覽器的預設操作衝突時該事件觸發器會執行瀏覽器預設的操作

複製程式碼 程式碼如下:

$(function (){$("#Text1").bind("click",function(){$(this).val("")})})
$(function(){$("#Text2" ).click(function(event,pamas1,pamas2)
{$(this).val("trigger事件觸發器" pamas1 pamas2)})
})
$(function(){$( "input[type=text]").trigger("click",["1","2"])})

如上程式碼,雖然為倆文字方塊的點擊事件綁定了函數,可最後一句程式碼也為這兩個文字方塊的點擊事件設定了觸發器,所以不需要使用者點擊對應的文字方塊就能執行它們的點擊事件所綁定的函數。另外該觸發器也為它所觸發的函數傳遞了參數,是一個javascript數組,可以在Text2的單擊函數裡看到參數的獲得。
trigger函數所觸發的事件與瀏覽器的預設操作衝突時該事件觸發器會執行瀏覽器預設的操作,而triggerHandler函數則不會執行瀏覽器預設的操作。
triggerHandler(type,[data]) 與trigger的使用一致

4.事件的交互處理
①hover:模仿老鼠懸停
hover(over, out) 傳回值:Object 參數-over:滑鼠移到元素上觸發的函數Function out:滑鼠移出元素觸發的函數Function

複製程式碼 程式碼如下:

判斷使用者輸入
$(function(){$("#hover1").hover(function(){
$("#hoverpd").show();},function(){
$("#hoverpd").hide();})
})

②toggle:多次點擊的循環回應
為匹配的元素的點擊事件添加許多綁定函數,這些函數隨著不停的單擊該元素而循環執行
toggle(fn1,fn2,fn3...) 返回值:Object 參數-fn1,fn2,fn3...要循環的函數Function

複製程式碼 程式碼如下:

var i=0;
$(function(){$("#toggle1").toggle(function(){i ;$("#hover1").val (i)},
function(){i=i 2;$("#hover1").val(i)})
})

5. jQuery的內建事件類型
①jQuery內建事件函數的兩種宣告方式
不帶參數的事件函數-事件類型名稱() 模擬了使用者的操作
帶參數的事件函數-事件型別名稱(事件函數)
$($("#id").click(function(){})) 帶參數的事件函數
$($("#id").click(function( ){}); $("#id").click();) 不含參數的事件函數-不點選#id也會執行對應函數即模擬了使用者操作
②jQuery內建事件類型分類
⑴瀏覽器相關事件
error(fn) 匹配元素發生錯誤時觸發某函數,error事件沒有標準,如當圖像src無效時會觸發圖像的error事件
load(fn) 匹配元素加載完後觸發某函數,如window是在所有DOM物件載入完才觸發,其他單一元素是在單一元素載入完後觸發
unload(fn)
resize(fn) 符合元素改變大小時觸發某函數
scroll(fn) 捲軸發生變化時觸發
⑵表單相關事件
change(fn) 在匹配元素失去焦點時觸發,也會在元素獲得焦點後觸發
select(fn)當使用者在文字方塊中選取某段文字時觸發
submit(fn) 提交表單時觸發
⑶鍵盤操作相關事件
keydown(fn) 鍵盤按下時觸發
keypress(fn)鍵盤按下又彈起時觸發順序是keydown->keyup->keypress
keyup(fn) 鍵盤彈起時觸發
⑷滑鼠操作相關事件
click(fn) 順序是mousedown->mouseup ->click
mousedown(fn)
mouseup(fn)
dblclick(fn)
mouseover(fn)
mouseout(fn)
mousemove(fn) 在符合元素上移動時觸發,事件處理函數會被傳遞一個變數--事件物件(其clientX,clientY屬性代表滑鼠座標)
⑸介面顯示相關事件
blur(fn) 符合元素失去焦點時觸發即可是滑鼠也可使Tab鍵
focus(fn)