jQuery中的事件處理

阿新 • • 發佈：2019-01-18

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> 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函式傳遞引數
<input id="Text2" type="text" />
$("#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陣列) 觸發所匹配的元素的某類事件所繫結的所有函式,當這類事件與瀏覽器的預設操作衝突時該事件觸發器會執行瀏覽器預設的操作
<input id="Text1" type="text" value="輸入使用者名稱" />
<input id="Text2" type="text" />
$(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
<input type="text" id="hover1-keleyi-com" /><span id="hoverpd-keleyi-com" style="display:none;">判斷使用者輸入</span>
$(function(){$("#hover1-keleyi-com").hover(function(){
$("#hoverpd-kel"+"eyi-com").show();},function(){
$("#hoverpd-keleyi-com").hide();})
})

②toggle:多次單擊的迴圈響應
為匹配的元素的單擊事件新增許多繫結函式,這些函式隨著不停的單擊該元素而迴圈執行
toggle(fn1,fn2,fn3...) 返回值:Object 引數-fn1,fn2,fn3...要迴圈的函式Function
<input type="button" id="toggle1" value="toggle"/>
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)

jQuery中的事件處理

jquery中ajax處理跨域的三大方式

描述wxWidgets中事件處理的類型轉化

原生JS及jQuery中事件委託的寫法

XAML: 自定義控件中事件處理的最佳實踐

JQuery中事件繫結的四種方法及其優缺點

Jquery中Ajax處理跨域的方式

惡補jquery(四)jquery中事件--冒泡

jQuery中事件觸發的三種方式及區別

利用jQuery選擇器快速匹配文檔中的按鈕，並為該按鈕綁定事件處理函數

jquery中的bind()、live()的區別與使用（事件處理）

jQuery中的事件處理

jQuery中的屬性操作，jQuery中的事件處理、jQuery 中的動畫簡單介紹

JQuery中阻止事件冒泡方式及其區別

Nginx事件處理中的connection和read、write事件的關聯

Jquery中的bind(),live(),delegate(),on()綁定事件方式前言

JQuery中的Dom操作和事件

關於表單form元素中onsubmit事件處理機制的認識

jQuery中的事件

jquery中ajax的相關事件匯總

Jquery中click事件重復執行的問題

jQuery中的事件處理

相關推薦