前三篇總結(jié)了jQuery的一些基礎(chǔ)，有jQuery對(duì)象的介紹、jQuery操作css樣式和jQuery操作元素。今天總結(jié)一下jQuery事件，這是比較重要的一塊，希望本次總結(jié)能幫助到很多同我一樣的新手。

首先，我們來(lái)看一個(gè)有用的實(shí)例，來(lái)加深以前所掌握的知識(shí)，其中有些是在前邊出現(xiàn)過(guò)的。

<img id="imgGoogle" src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png" alt="google.com" /> 
<input type="button" id="btnHide" value="隱藏圖片" /> 

jQuery(document).ready(function() { 
    jQuery("#btnHide").click(function() { 
        jQuery("#imgGoogle").hide("1000"); 
    }); 
}); 

當(dāng)點(diǎn)擊隱藏圖片時(shí)，google的logo圖片將在一秒鐘進(jìn)行隱藏。這里我們用到了hide()方法，當(dāng)然也可不指定時(shí)間，如果要顯示圖片的話(huà)應(yīng)該使用show()方法，感覺(jué)是不是很棒。

現(xiàn)在開(kāi)始本篇的主要內(nèi)容：事件。大家可能已經(jīng)注意到了，上邊已經(jīng)在多處用到了事件。其中，document.ready就是一個(gè)事件，當(dāng)文檔準(zhǔn)備好了，它告訴jQuery可以執(zhí)行事件了，鼠標(biāo)移動(dòng)、點(diǎn)擊、文本框焦點(diǎn)離開(kāi)等都是事件。

在過(guò)去，我們經(jīng)?？吹剑?/p>

<div onclick="alert('租房貴');" id="divRent">在北京</div> 

這種寫(xiě)法。從現(xiàn)在開(kāi)始，大家應(yīng)該拋棄這種寫(xiě)法。實(shí)現(xiàn)js代碼和html的分離，這樣頁(yè)面整潔了，效率也會(huì)更高?，F(xiàn)在的寫(xiě)法，將會(huì)變成：

jQuery("#divRent").click(function() { 
    alert("租房貴"); 
}); 

既然是總結(jié)，我還是像前三篇那樣，用實(shí)例來(lái)記錄盡可能多的事件方法，方便大家在需要的時(shí)候查閱。

以下是自己在學(xué)習(xí)過(guò)程中遇到的：

1、one()事件，綁定要執(zhí)行一次的事件

<div id="divRent">人在北京</div> 

jQuery("#divRent").one("click", function() { 
    alert("租房貴"); 
}); 

以上綁定一次單擊事件，第二次點(diǎn)擊時(shí)，不會(huì)再?gòu)棾鎏崾尽?/p>

2、focus()和blur()事件

<input id="tTest" type="text" /> 

jQuery("#tTest").focus(function() {  
    jQuery(this).css("background", "yellow");  
}).blur(function() {  
    jQuery(this).css("background", "white");  
}); 

此例實(shí)用到了鏈?zhǔn)綄?xiě)法，相信不難理解。如果對(duì)jQuery操作css樣式不熟悉，可以看看第二篇總結(jié)。此例當(dāng)焦點(diǎn)聚焦在本文框時(shí)，背景色變?yōu)辄S色，離開(kāi)時(shí)又變回白色。這樣做的目的，可以提高用戶(hù)體驗(yàn)，我個(gè)人感覺(jué)。

3、keydown()和keyup()事件

<input type="text" id="tTest" />  
<label id="lResult"></label> 

jQuery("#tTest").keyup(function() {  
    jQuery("#lResult").html(jQuery(this).val());  
});  

當(dāng)鍵彈起時(shí)（這里感覺(jué)不好表達(dá)^_^），在label中將會(huì)顯示文本框中的內(nèi)容。操作元素屬性部分可以看看第三篇總結(jié)。

4、submit()事件

<form id="form2" runat="server"> 
    <input id="text" type="text" />  
    <asp:button id="btnTest" onclick="btnTest_Click" runat="server" text="測(cè)試">  
    </asp:button>  
</form> 

jQuery("#form1").submit(function() {  
    if (jQuery.trim(jQuery("#text").val()).length == 0) {  
        return false;  
    }  
}); 

可以看出，本實(shí)例使用了服務(wù)器控件。實(shí)質(zhì)上是一樣的，最終會(huì)進(jìn)行表單提交。點(diǎn)擊按鈕時(shí)，進(jìn)行表單提交。如果文本框內(nèi)容為空時(shí)，返回false，從而不進(jìn)行提交；否則，進(jìn)行提交。此類(lèi)應(yīng)用在web開(kāi)發(fā)中隨處可見(jiàn)。

5、hover()事件

<div id="divHover">hover me</div> 

jQuery("#divHover").hover(function() {  
    jQuery(this).css("background", "yellow");  
}, function() {  
    jQuery(this).css("background", "red");  
}); 

鼠標(biāo)移動(dòng)到div上時(shí)，div背景色變成黃色，移出背景色變成紅色。

以上幾種事件是比較常見(jiàn)的，也是用的比較多的。當(dāng)然本篇總結(jié)的只是一小部分，學(xué)習(xí)中遇到問(wèn)題還得用jQuery文檔進(jìn)行查閱。

原文鏈接：http://www.jquery001.com/jquery-event.html