jquery中的事件處理詳細介紹
更新時間：2013年06月24日 11:00:42 作者：
本文為大家詳細介紹喜愛頁面載入完畢響應事件、綁定與反綁定事件監(jiān)聽器、事件觸發(fā)器、事件的交互處理等等，感興趣的朋友可以參考下哈，希望對大家有所幫助
1.頁面載入完畢響應事件
所謂頁面載入完畢是指DOM元素載入就緒了,能夠被讀取和操作了。
①jQuery中的$(doucument).ready()事件
ready(fn)是jQuery事件模塊中最重要的一個函數(shù)。這個方法可以看作是對window.onload注冊事件的替代方法。通過使用這個方法,可以在DOM載入就緒時立刻調(diào)用所綁定的函數(shù),而幾乎所有的javaScript函數(shù)都是需要在那一刻執(zhí)行。
ready(fn) 返回值:Object 參數(shù)-fn:要在DOM載入就緒時執(zhí)行的參數(shù)Function 當DOM載入就緒時綁定一個要執(zhí)行的函數(shù)
而它有一種很簡單的縮寫形式$(document).ready(function(){}) => $(function(){})
②window.onload()事件和$(document).ready()事件的比較
window.onload()=function(){}
如果使用多個window.onload(),則只有最后一個綁定的函數(shù)能被執(zhí)行,它將覆蓋前面所有window.onload()綁定的函數(shù)。
如果使用多個$(),則它們都能被執(zhí)行。
需要注意的是如果<body onload> body標簽的onload事件已經(jīng)注冊了某個函數(shù) 則$()事件注冊的函數(shù)將不會被執(zhí)行
2.綁定與反綁定事件監(jiān)聽器
①綁定事件
⑴bind(type,[data],fn)函數(shù)
就是將某函數(shù)與某元素的某事件綁定在一起 $("#id").click(function(){})就是將一個匿名函數(shù)與id元素的click事件綁在一起
但上面的例子其實只是縮寫形式,因為其是簡單常用的事件綁定,正規(guī)寫法應如下:
$("#id").bind("click",[data],function(){})
bind(type,[data],fn) 返回值:Object 參數(shù)-type:事件類型String data:可選,作為event.data屬性值傳遞給后面fn的實參Object fn:綁定到事件上的函數(shù)Function
⑵為處理函數(shù)傳遞參數(shù)
這里用到bind()函數(shù)的第二個參數(shù)及event.data屬性為fn函數(shù)傳遞參數(shù)
<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("")}
});
})
第二個參數(shù)為一個json對象,在fn函數(shù)中通過event.data通過鍵名獲得參數(shù)值
⑶阻止瀏覽器默認的行為
有時bind綁定的函數(shù)會與瀏覽器默認的操作沖突,這時如果想阻止瀏覽器默認的操作,只需在fn后面加一句return false;
$("form").bind("submit",function(){return false;})
②反綁定事件
就是解除與某元素的某事件綁定在一起的某函數(shù)
unbind([type],[fn名]) 返回值:Object 參數(shù)-type:事件類型String fn名:要被解除綁定的函數(shù)名Function
以上倆參數(shù)都是可選參數(shù) 如果參數(shù)為空,就是解除所有匹配元素的所有事件所綁定的函數(shù)
$(function(){$("#btn1").click(function(){
$("input[type=text]").unbind()})
})
單擊btn1后,解除所有為type=text文本框的事件綁定的所有函數(shù)
③一次性的事件綁定
就是為某元素的某事件所綁定的某函數(shù)只能被執(zhí)行一次
one(type,[data],fn) 返回值:Object 參數(shù)-type:事件類型String data:可選,作為event.data屬性值傳遞給后面fn的實參Object fn:綁定到事件上的函數(shù)Function
使用與bind()函數(shù)一致,不同之處就是one里的fn只能被執(zhí)行一次。
3.事件觸發(fā)器
上述綁定的一些函數(shù),需要用戶執(zhí)行一定的操作才會被執(zhí)行,如click事件綁定的函數(shù)需要用戶單擊相應的元素才會被執(zhí)行。但事件觸發(fā)器可以用代碼模擬用戶的操作動作進而執(zhí)行事件所綁定的函數(shù),而不需要用戶進行某些操作。
trigger(type,[data]) 返回值:Object 參數(shù)-type:事件類型String data:可選,傳遞給所觸發(fā)的事件所綁定的函數(shù)的實參Array(是一個javascript數(shù)組) 觸發(fā)所匹配的元素的某類事件所綁定的所有函數(shù),當這類事件與瀏覽器的默認操作沖突時該事件觸發(fā)器會執(zhí)行瀏覽器默認的操作
<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事件觸發(fā)器"+pamas1+pamas2)})
})
$(function(){$("input[type=text]").trigger("click",["1","2"])})
如上代碼,雖然為倆文本框的單擊事件綁定了函數(shù),可最后一句代碼也為這倆文本框的單擊事件設置了觸發(fā)器,所以不需要用戶單擊相應的文本框就能執(zhí)行它們的單擊事件所綁定的函數(shù)。另外該觸發(fā)器還為它所觸發(fā)的函數(shù)傳遞了參數(shù),是一個javascript數(shù)組,可以在Text2的單擊函數(shù)里看到參數(shù)的獲得。
trigger函數(shù)所觸發(fā)的事件與瀏覽器的默認操作沖突時該事件觸發(fā)器會執(zhí)行瀏覽器默認的操作,而triggerHandler函數(shù)則不會執(zhí)行瀏覽器默認的操作。
triggerHandler(type,[data]) 與trigger的使用一致
4.事件的交互處理
①hover:模仿鼠標懸停
hover(over,out) 返回值:Object 參數(shù)-over:鼠標移到元素上觸發(fā)的函數(shù)Function out:鼠標移出元素觸發(fā)的函數(shù)Function
<input type="text" id="hover1" /><span id="hoverpd" style="display:none;">判斷用戶輸入</span>
$(function(){$("#hover1").hover(function(){
$("#hoverpd").show();},function(){
$("#hoverpd").hide();})
})
②toggle:多次單擊的循環(huán)響應
為匹配的元素的單擊事件添加許多綁定函數(shù),這些函數(shù)隨著不停的單擊該元素而循環(huán)執(zhí)行
toggle(fn1,fn2,fn3...) 返回值:Object 參數(shù)-fn1,fn2,fn3...要循環(huán)的函數(shù)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的內(nèi)置事件類型
①jQuery內(nèi)置事件函數(shù)的兩種聲明方式
不帶參數(shù)的事件函數(shù)-事件類型名() 模擬了用戶的操作
帶參數(shù)的事件函數(shù)-事件類型名(事件函數(shù))
$($("#id").click(function(){})) 帶參數(shù)的事件函數(shù)
$($("#id").click(function(){}); $("#id").click();) 不帶參數(shù)的事件函數(shù)-不單擊#id也會執(zhí)行相應函數(shù) 即模擬了用戶操作
②jQuery內(nèi)置事件類型分類
⑴瀏覽器相關(guān)事件
error(fn) 匹配元素發(fā)生錯誤時觸發(fā)某函數(shù),error事件沒有標準,如當圖像src無效時會觸發(fā)圖像的error事件
load(fn) 匹配元素加載完后觸發(fā)某函數(shù),如window是在所有DOM對象加載完才觸發(fā),其他單個元素是在單個元素加載完后觸發(fā)
unload(fn)
resize(fn) 匹配元素改變大小時觸發(fā)某函數(shù)
scroll(fn) 滾動條發(fā)生變化時觸發(fā)
⑵表單相關(guān)事件
change(fn) 在匹配元素失去焦點時觸發(fā),也會在元素獲得焦點后觸發(fā)
select(fn) 當用戶在文本框中選中某段文字時觸發(fā)
submit(fn) 提交表單時觸發(fā)
⑶鍵盤操作相關(guān)事件
keydown(fn) 鍵盤按下時觸發(fā)
keypress(fn) 鍵盤按下又彈起時觸發(fā) 順序是keydown->keyup->keypress
keyup(fn) 鍵盤彈起時觸發(fā)
⑷鼠標操作相關(guān)事件
click(fn) 順序是mousedown->mouseup->click
mousedown(fn)
mouseup(fn)
dblclick(fn)
mouseover(fn)
mouseout(fn)
mousemove(fn) 在匹配元素上移動時觸發(fā),事件處理函數(shù)會被傳遞一個變量--事件對象(其clientX,clientY屬性代表鼠標坐標)
⑸界面顯示相關(guān)事件
blur(fn) 匹配元素失去焦點時觸發(fā) 即可是鼠標 也可使Tab鍵
focus(fn)
所謂頁面載入完畢是指DOM元素載入就緒了,能夠被讀取和操作了。
①jQuery中的$(doucument).ready()事件
ready(fn)是jQuery事件模塊中最重要的一個函數(shù)。這個方法可以看作是對window.onload注冊事件的替代方法。通過使用這個方法,可以在DOM載入就緒時立刻調(diào)用所綁定的函數(shù),而幾乎所有的javaScript函數(shù)都是需要在那一刻執(zhí)行。
ready(fn) 返回值:Object 參數(shù)-fn:要在DOM載入就緒時執(zhí)行的參數(shù)Function 當DOM載入就緒時綁定一個要執(zhí)行的函數(shù)
而它有一種很簡單的縮寫形式$(document).ready(function(){}) => $(function(){})
②window.onload()事件和$(document).ready()事件的比較
window.onload()=function(){}
如果使用多個window.onload(),則只有最后一個綁定的函數(shù)能被執(zhí)行,它將覆蓋前面所有window.onload()綁定的函數(shù)。
如果使用多個$(),則它們都能被執(zhí)行。
需要注意的是如果<body onload> body標簽的onload事件已經(jīng)注冊了某個函數(shù) 則$()事件注冊的函數(shù)將不會被執(zhí)行
2.綁定與反綁定事件監(jiān)聽器
①綁定事件
⑴bind(type,[data],fn)函數(shù)
就是將某函數(shù)與某元素的某事件綁定在一起 $("#id").click(function(){})就是將一個匿名函數(shù)與id元素的click事件綁在一起
但上面的例子其實只是縮寫形式,因為其是簡單常用的事件綁定,正規(guī)寫法應如下:
$("#id").bind("click",[data],function(){})
bind(type,[data],fn) 返回值:Object 參數(shù)-type:事件類型String data:可選,作為event.data屬性值傳遞給后面fn的實參Object fn:綁定到事件上的函數(shù)Function
⑵為處理函數(shù)傳遞參數(shù)
這里用到bind()函數(shù)的第二個參數(shù)及event.data屬性為fn函數(shù)傳遞參數(shù)
復制代碼 代碼如下:
<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("")}
});
})
第二個參數(shù)為一個json對象,在fn函數(shù)中通過event.data通過鍵名獲得參數(shù)值
⑶阻止瀏覽器默認的行為
有時bind綁定的函數(shù)會與瀏覽器默認的操作沖突,這時如果想阻止瀏覽器默認的操作,只需在fn后面加一句return false;
復制代碼 代碼如下:
$("form").bind("submit",function(){return false;})
②反綁定事件
就是解除與某元素的某事件綁定在一起的某函數(shù)
unbind([type],[fn名]) 返回值:Object 參數(shù)-type:事件類型String fn名:要被解除綁定的函數(shù)名Function
以上倆參數(shù)都是可選參數(shù) 如果參數(shù)為空,就是解除所有匹配元素的所有事件所綁定的函數(shù)
復制代碼 代碼如下:
$(function(){$("#btn1").click(function(){
$("input[type=text]").unbind()})
})
單擊btn1后,解除所有為type=text文本框的事件綁定的所有函數(shù)
③一次性的事件綁定
就是為某元素的某事件所綁定的某函數(shù)只能被執(zhí)行一次
one(type,[data],fn) 返回值:Object 參數(shù)-type:事件類型String data:可選,作為event.data屬性值傳遞給后面fn的實參Object fn:綁定到事件上的函數(shù)Function
使用與bind()函數(shù)一致,不同之處就是one里的fn只能被執(zhí)行一次。
3.事件觸發(fā)器
上述綁定的一些函數(shù),需要用戶執(zhí)行一定的操作才會被執(zhí)行,如click事件綁定的函數(shù)需要用戶單擊相應的元素才會被執(zhí)行。但事件觸發(fā)器可以用代碼模擬用戶的操作動作進而執(zhí)行事件所綁定的函數(shù),而不需要用戶進行某些操作。
trigger(type,[data]) 返回值:Object 參數(shù)-type:事件類型String data:可選,傳遞給所觸發(fā)的事件所綁定的函數(shù)的實參Array(是一個javascript數(shù)組) 觸發(fā)所匹配的元素的某類事件所綁定的所有函數(shù),當這類事件與瀏覽器的默認操作沖突時該事件觸發(fā)器會執(zhí)行瀏覽器默認的操作
復制代碼 代碼如下:
<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事件觸發(fā)器"+pamas1+pamas2)})
})
$(function(){$("input[type=text]").trigger("click",["1","2"])})
如上代碼,雖然為倆文本框的單擊事件綁定了函數(shù),可最后一句代碼也為這倆文本框的單擊事件設置了觸發(fā)器,所以不需要用戶單擊相應的文本框就能執(zhí)行它們的單擊事件所綁定的函數(shù)。另外該觸發(fā)器還為它所觸發(fā)的函數(shù)傳遞了參數(shù),是一個javascript數(shù)組,可以在Text2的單擊函數(shù)里看到參數(shù)的獲得。
trigger函數(shù)所觸發(fā)的事件與瀏覽器的默認操作沖突時該事件觸發(fā)器會執(zhí)行瀏覽器默認的操作,而triggerHandler函數(shù)則不會執(zhí)行瀏覽器默認的操作。
triggerHandler(type,[data]) 與trigger的使用一致
4.事件的交互處理
①hover:模仿鼠標懸停
hover(over,out) 返回值:Object 參數(shù)-over:鼠標移到元素上觸發(fā)的函數(shù)Function out:鼠標移出元素觸發(fā)的函數(shù)Function
復制代碼 代碼如下:
<input type="text" id="hover1" /><span id="hoverpd" style="display:none;">判斷用戶輸入</span>
$(function(){$("#hover1").hover(function(){
$("#hoverpd").show();},function(){
$("#hoverpd").hide();})
})
②toggle:多次單擊的循環(huán)響應
為匹配的元素的單擊事件添加許多綁定函數(shù),這些函數(shù)隨著不停的單擊該元素而循環(huán)執(zhí)行
toggle(fn1,fn2,fn3...) 返回值:Object 參數(shù)-fn1,fn2,fn3...要循環(huán)的函數(shù)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的內(nèi)置事件類型
①jQuery內(nèi)置事件函數(shù)的兩種聲明方式
不帶參數(shù)的事件函數(shù)-事件類型名() 模擬了用戶的操作
帶參數(shù)的事件函數(shù)-事件類型名(事件函數(shù))
$($("#id").click(function(){})) 帶參數(shù)的事件函數(shù)
$($("#id").click(function(){}); $("#id").click();) 不帶參數(shù)的事件函數(shù)-不單擊#id也會執(zhí)行相應函數(shù) 即模擬了用戶操作
②jQuery內(nèi)置事件類型分類
⑴瀏覽器相關(guān)事件
error(fn) 匹配元素發(fā)生錯誤時觸發(fā)某函數(shù),error事件沒有標準,如當圖像src無效時會觸發(fā)圖像的error事件
load(fn) 匹配元素加載完后觸發(fā)某函數(shù),如window是在所有DOM對象加載完才觸發(fā),其他單個元素是在單個元素加載完后觸發(fā)
unload(fn)
resize(fn) 匹配元素改變大小時觸發(fā)某函數(shù)
scroll(fn) 滾動條發(fā)生變化時觸發(fā)
⑵表單相關(guān)事件
change(fn) 在匹配元素失去焦點時觸發(fā),也會在元素獲得焦點后觸發(fā)
select(fn) 當用戶在文本框中選中某段文字時觸發(fā)
submit(fn) 提交表單時觸發(fā)
⑶鍵盤操作相關(guān)事件
keydown(fn) 鍵盤按下時觸發(fā)
keypress(fn) 鍵盤按下又彈起時觸發(fā) 順序是keydown->keyup->keypress
keyup(fn) 鍵盤彈起時觸發(fā)
⑷鼠標操作相關(guān)事件
click(fn) 順序是mousedown->mouseup->click
mousedown(fn)
mouseup(fn)
dblclick(fn)
mouseover(fn)
mouseout(fn)
mousemove(fn) 在匹配元素上移動時觸發(fā),事件處理函數(shù)會被傳遞一個變量--事件對象(其clientX,clientY屬性代表鼠標坐標)
⑸界面顯示相關(guān)事件
blur(fn) 匹配元素失去焦點時觸發(fā) 即可是鼠標 也可使Tab鍵
focus(fn)
相關(guān)文章
一個簡單的jQuery計算器實現(xiàn)了連續(xù)計算功能
這篇文章主要介紹了一個簡單的jQuery計算器主要實現(xiàn)了連續(xù)計算功能,需要的朋友可以參考下2014-07-07
翻譯整理的jQuery使用查詢手冊...2007-03-03
基于jQuery多重圖片無限循環(huán)動畫效果，本文給大家分享基于jQuery傾斜打開側(cè)邊欄菜單特效代碼，感興趣的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery文本框得到與失去焦點動態(tài)改變樣式效果,涉及jQuery針對頁面表單元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2016-09-09
解決jquery appaend元素中id綁定事件失效的問題
下面小編就為大家?guī)硪黄鉀Qjquery appaend元素中id綁定事件失效的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
下面小編就為大家?guī)硪黄狫Query 的跨域方法推薦_可跨任何網(wǎng)站。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦)
這篇文章主要介紹了jquery.guide.js新版上線操作向?qū)хU空提示jQuery插件(推薦),需要的朋友可以參考下2017-05-05
自編jQuery插件實現(xiàn)模擬alert和confirm
現(xiàn)在絕大多數(shù)網(wǎng)站都不用自帶的alert和confirm了，因為界面太生硬了。因此這個插件就這樣產(chǎn)生了...2014-09-09
這篇文章主要為大家詳細介紹了jQuery制作網(wǎng)頁版選項卡的相關(guān)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這個郁悶了，今天寫這個功能的時候發(fā)現(xiàn)了問題，上網(wǎng)找了好多資料對照，更加糾結(jié)2011-11-11