jQuery 開發之jQuery事件一，開發jquery事件
1，DOM載入
$(document).ready() 和window.onload()的區別。他們雖然功能相似，但是執行時機方面是有區別的。 window.onload() 方法是在網頁中所有的元素(包括元素的關聯檔案)完全載入到瀏覽器後才執行。此時JavaScript可以訪問網頁中的任何元素。而通過jQuery 中的$(document).ready() 方法註冊的時間處理常式，在DOM完全就緒時就可以被調用。此時網頁中的所有元素對jQuery而言都可以被訪問 的，但是這並不意味著這些元素的關聯的檔案都已經下載完畢。要解決這個問題，可以使用jQuery中另一個頁面載入方法load()方法，load()方法會在元素的onload()事件中綁定一個處理函數，如果處理函數綁定給window 對象，則會在所有內容（包括視窗，架構，對象和圖片）載入完畢後觸發。如果處理函數綁定在元素上，則會在元素的內容載入完畢後觸發。
2，事件綁定
在文檔載入完成後，如果打算為元素繫結事件來完成某些操作，則可以使用bind()方法來匹配元素進行特定事件的綁定，bind()方法的格式如下：
bind(type [, data],fn);參數說明如下：
第1個參數是事件類型，事件類型包括：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup，mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, error等，當然了也可以用自訂的類型。
第2個參數為選擇性參數，作為event.data 屬性值傳遞給事件對象的額外資料對象。
第3個對象則是用來綁定的處理函數。
範例程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>jQuery test </title><script type ="text/javascript" src ="jquery.js" ></script><script type ="text/javascript">$(document).ready(function(){ $("p").bind("click",function(){ var content = "<div id ='content'>今天晚上吃粽子！！！</div>"; $("body").append(content); $(this).next().show(); });});</script></head><body><p>今天晚上要吃啥？</p></body></html>運行結果如下：
簡寫綁定事件程式碼範例如下：
停止事件冒泡
停止事件冒泡可以阻止事件中其他對象的事件處理函數被執行。在jQuery中提供了stopPropagation()方法來停止事件冒泡。
jQuery範例程式碼如下：
$("span").bind("click",function(event){//do something event.stopPropagation();})阻止預設行為
在網頁中的元素有自己的預設行為，例如，單擊超連結後會跳轉，單擊提交按鈕後表單會提交，有時需要阻止元素的預設行為。
在jQuery中preventDefault() 方法可以阻止元素的預設行為
jQuery 範例程式碼如下：
$("#submit").bind("click",function(event){//do something event.preventDefault();})如果想同時對事件對象停止冒泡和預設行為，可以在事件處理函數中返回false。在表單的例子中，可以把
event.preventDefault() //阻止預設行為改為 return false;
也可以把事件冒泡例子中的
event.stopPropagation() //停止事件冒泡改為 return false；
2，事件對象的屬性
(1)event.type
該方法的作用是擷取事件的類型。
(2)event.preventDefault()
該方法的作用是阻止元素的預設方法
(3)event.stopPropagation()
該方法的作用是阻止事件冒泡
(4)event.target
該方法的作用是擷取觸發事件的元素。
(5)event.relatedTarget
該方法的作用是擷取 觸發事件的相關元素。
(6) event.pageX 和event.pageY
該方法的作用是擷取游標相對於頁面x座標和y座標
(7) event.which
該方法的作用是擷取在滑鼠點擊事件中擷取到滑鼠的左，中，右鍵，在鍵盤事件中擷取鍵盤的按鍵。
擷取滑鼠的左，中，右鍵的jQuery範例程式碼如下：
$("a").mousedown(function(event){alert(event.which); //1 ＝滑鼠左鍵， 2=滑鼠中鍵 3=滑鼠右鍵})擷取鍵盤按鍵的jQuery範例程式碼如下：
$("input").keyup(function(event){alert(event.which); //擷取鍵盤的按鍵})3，移除事件
首先在網頁上添加一個移除事件的按鈕
<button id ="delAll">刪除事件</button>移除事件的jQuery範例程式碼如下：
$("#delAll").click(function(event){$("btn").unbind("click");})unbind()方法的文法結構人如下：
unbind([type],data)第一個參數是事件類型，第二個是要移除的處理函數，具體說明如下：
(1)如果沒有參數則刪除所有綁定的事件。
(2)如果提供了事件類型作為參數，則只刪除該類型的綁定事件
(3)如果把在綁定時的處理函數作為第二個參數，那麼只有特定事件的處理函數會被刪除。
另外，對於只需觸發一次，隨後要立即解除綁定的情況，jQuery提供了一種簡單的方法 one()方法。 one()方法可以為元素繫結處理函數。當處理函數被觸發一次後，立即刪除。即在每一個對象上，處理函數只執行一次。
one()文法格式如下：
one(type[,data],fn)jQuery範例程式碼執行如下：
$("#test").one("click",function(){//do something})Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
