標籤：default value name 綁定 使用 false 網站 pos 滑鼠右鍵
載入DOM
以瀏覽器裝在文檔為例，在頁面載入完畢後，瀏覽器會通過JavaScript為DOM元素添加事件。在常規的JavaScript代碼中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()是事件模組中最重要的一個函數，可以極大地提高Web應用程式的響應速度。jQuery就是用$(document).ready()方法來代替傳統JavaScript的window.onload方法的。通過使用該方法，可以在DOM載入就緒時就對其進行操縱並調用執行它所綁定的函數。
$(document).ready()與window.onload區別
（1）執行時機
window.onload方法是在網頁中所有的元素（包括元素的所有關聯檔案）完全載入到瀏覽器後才執行，JavaScript此時才可以訪問網頁中的任何元素。而通過jQuery中的$(document).ready()方法註冊的事件處理常式，在DOM完全就緒時就可以被調用。此時，網頁的所有元素對jQuery而言都是可以訪問的，但是，這不是意味著這些元素關聯的檔案都已經下載完畢。
假設有一個網站，與圖片有關的HTML下載完畢，並且已經解析為DOM樹了，但很有可能圖片還未載入完畢，所以例片的高度和寬度這樣的屬性此時不一定有效。為瞭解決這個問題，可以使用jQuery中另一個關於頁面載入的方法——load()方法。load()方法會在元素的onload事件中綁定一個處理函數。如果處理函數綁定給window對象，則會在所有內容（包括視窗、架構、對象和映像等）載入完畢後觸發。
$(window).load(function(){ //編寫代碼})
等價於JavaScript中的代碼：
window.onload = function(){ //編寫代碼}
（2）多次使用
假設網頁中有兩個函數：
function one(){ alert("one");}function two(){ alert("two");}
當網頁載入完畢後，通過JavaScript代碼來分別調用one函數和two函數：
window.onload = one;window.onload = two;
運行後只彈出字串“two”對話方塊，字串“one”不能彈出的原因是JavaScript的onload事件一次只能儲存對一個函數的引用，它會自動用後面的函數覆蓋前面的函數，因此不能在現有的行為上添加新的行為。
為了達到兩個函數順序觸發的效果，只能在建立一個新的JavaScript方法來實現。
window.onload = function(){ one(); two();}
雖然這樣編寫的代碼能解決某些問題，但是不能滿足某些需求，例如有多個JavaScript檔案，每個檔案都需要用到window.onload方法，這種情況下用上面提到的方法編寫代碼會非常麻煩。而jQuery的$(document).ready()方法能夠很好地處理這些情況，每次調用$(document).ready()方法都會在現有的行為上追加新的行為，這些行為函數會根據註冊的順序一次執行。
$(document).ready(function(){ one();})$(document).ready(function(){ two();})
（3）簡寫方式
$(document).ready(function(){ //編寫代碼})可以寫成:$(function(){ //編寫代碼})也可以寫成：$().ready(function(){ //編寫代碼})
事件綁定
在文檔裝載完成後，如果打算為元素繫結事件來完成某些操作，則可以使用bind()方法來對匹配元素進行特定事件的綁定，bind()方法的格式為：
bind(type[,data],function)
bind()方法有3個參數：
? 第1個參數是事件類型，類型包括：blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等，也可以是自定名稱。
? 第2個參數為選擇性參數，作為event.data屬性值傳遞給事件對象的額外資料對象。
? 第3個參數用來綁定的處理函數。
程式碼範例：
$(function(){ $("p").bind("click",function(){ alert("click事件被觸發"); })})
簡寫方式：
$(function(){ $("p").click(function(){ alert("click事件被觸發"); })})
合成事件
jQuery有兩個合成事件——hover()方法和toggle(),屬於jQuery自訂的方法。
（1）hover
hover()方法的文法結構：
hover(enter,leave);
hover()方法用於類比游標懸停事件。當游標移動到元素上時，會觸發指定的第1個函數（enter），當游標移出這個元素時，會觸發指定的第2個函數（leave）。
註：hover()方法準確的說是替代了jQuery中的bind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover")和bind("mouseout").因此當需要觸發hover()方法的第2個函數時，需要用trigger("mouseleave")來觸發，而不是trigger("mouseout").
（2）toggle
toggle()方法的文法結構：
toggle(fn1,fn2,...fnN);
toggle()方法用於類比滑鼠連續單擊事件。第一次單擊元素，觸發指定的第1個函數（fn1）；再次單擊同一個元素，觸發第2個函數（fn2）；如果有更多函數，則依次觸發，直到最後一個。隨後的每次單擊都重複對這幾個函數的輪番調用。
事件冒泡
在頁面上可以有多個事件，也可以多個元素響應同一個事件。假設網頁上有兩個元素，其中一個元素嵌套在另個裡面，並且都被綁定了click事件，同時<body>元素上也綁定了click事件。
<script> $(function(){ $("span").click(function(){ var txt = $("#msg").html() + "<p>內層span元素被單擊</p>"; $("#msg").html(txt); }); $("#content").click(function(){ var txt = $("#msg").html() + "<p>外層div元素被單擊</p>"; $("#msg").html(txt); }); $("body").click(function(){ var txt = $("#msg").html() + "<p>body元素被單擊</p>"; $("#msg").html(txt); }); })</script><div id="content"> 外層div元素 <span>內層span元素</span> 外層div元素</div><div id="msg"></div>
當單擊內部<span>元素，即觸發<span>元素的click事件，會輸出3條記錄，這就是由事件冒泡引起的。
在單擊<span>元素的同時，也單擊了包含<span>元素的<div>及包含<div>的<body>，並且每個元素都會按照特定的順序響應click事件。<span>--<div>--<body>。
之所以稱為冒泡，是因為事件會按照DOM的階層像水泡一樣不斷向上直至頂端。
解決事件冒泡
事件對象
jQuery進行了必要的擴充和封裝，從而使得在任何瀏覽器中都能很輕鬆地擷取事件對象以及事件對象的一些屬性。在程式中使用事件對象非常簡單，只需要為函數添加一個參數。
$("element").bind("click",function(event){ //event:事件對象 //...})
這樣，當單擊“element”元素時，事件對象就被建立了。這個事件對象只有事件處理函數才能訪問到。事件處理函數執行完畢後，事件對象就被銷毀了。
停止事件冒泡
停止事件冒泡可以阻止事件中其他對象的事件處理函數被執行。在jQuery中提供了stopPropagation()方法來停止事件冒泡。
$("span").click(function(event){ var txt = $("#msg").html() + "<p>內層span元素被單擊</p>"; $("#msg").html(txt); event.stopPropagation();});
阻止預設行為
網頁中的元素有自己預設的行為，例如，單擊超連結後會跳轉、單擊“提交”按鈕後表單會提交，有時需要阻止元素的預設行為。在jQuery中，提供了preventDefault()方法來阻止元素的預設行為。
<script> $(function(){ $("#sub").click(function(){ var username = $("#username").val(); if(username==""){ $("#msg").html("<p>文字框內容不可為空。</p>"); event.preventDefault(); } }) })</script><form action="test.html"> 使用者名稱：<input type="text" id="username"/> <input type="submit" value="提交" id="sub"/></form><div id="msg"></div>
當使用者名稱為空白時，單擊“提交”按鈕，會出現“文字框不可為空。”的提示，並且表單不能提交。只有使用者名稱輸入內容後，才能提交表單。
其實無論是停止冒泡程式還是阻止預設行為都可以用“return false;”來代替。
事件捕獲
事件捕獲和事件冒泡剛好相反的兩個過程，事件捕獲是從自頂端往下開始出發。從最外層元素開始，然後再到最裡層元素。jQuery不支援事件捕獲，JavaScript支援。
事件對象的屬性
（1）event.type
$("a").click(function(event){ alert(event.type);})//"click"
（2）event.target
$("a[href=‘http://google.com‘]").click(function(event){ var tg = event.target; alert(tg.href);})//"http://google.com"
（3）event.pageX和event.pageY
該方法的作用是擷取到游標相對於頁面的x的座標和y座標。如果頁面上由捲軸，則還要加上捲軸的寬度或者高度。
$("a").click(function(event){ //擷取滑鼠當前相對於頁面的座標 alert("Current mouse position:" + event.pageX + ", " + event.pageY);})
（4）event.which
該方法作用是在按一下滑鼠事件中擷取到滑鼠的左、中、右鍵；在鍵盤事件中擷取鍵盤的案例。
$("a").click(function(event){ alert(event.which);})//1:滑鼠左鍵；2：滑鼠中鍵；3:滑鼠右鍵
jQuery中的事件
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
