標籤：
一：頁面載入
ready(fn)
當DOM載入就緒可以查詢及操縱時綁定一個要執行的函數。
這是事件模組中最重要的一個函數，因為它可以極大地提高web應用程式的響應速度。
簡單地說，這個方法純粹是對向window.load事件註冊事件的替代方法。通過使用這個方法，可以在DOM載入就緒能夠讀取並操縱時立即調用你所綁定的函數，而99.99%的JavaScript函數都需要在那一刻執行。
有一個參數－－對jQuery函數的引用－－會傳遞到這個ready事件處理函數中。可以給這個參數任意起一個名字，並因此可以不再擔心命名衝突而放心地使用$別名。
請確保在 <body> 元素的onload事件中沒有註冊函數，否則不會觸發$(document).ready()事件。
可以在同一個頁面中無限次地使用$(document).ready()事件。其中註冊的函數會按照（代碼中的）先後順序依次執行。
傳回值
jQuery
參數
fn (Function) : 要在DOM就緒時執行的函數
樣本
在DOM載入完成時啟動並執行代碼，可以這樣寫：
jQuery 代碼:
$(document).ready(function(){
// 在這裡寫你的代碼...
});
使用 $(document).ready() 的簡寫，同時內部的 jQuery 代碼依然使用 $ 作為別名，而不管全域的 $ 為何。
jQuery 代碼:
jQuery(function($) {
// 你可以在這裡繼續使用$作為別名...
});
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>巧用jQuery事件</title><style type="text/css">.high{ font-weight:bold; /* 粗體字 */ color : red; /* 字型顏色設定紅色*/}.another{ font-style:italic; color:blue;}</style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("p").one("click", { name: "zhang" }, function(event) { // alert($(this).text()); //var oEvent = window.event; var msg = event.data.name; alert(msg); }); }) </script></head><body ><p>Hellow</p><p>World</p></body></html>
二:事件處理
bind(type,[data],fn)
為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。
這個事件處理函數會接收到一個事件對象，可以通過它來阻止（瀏覽器）預設的行為。如果既想取消預設的行為，又想阻止事件起泡，這個事件處理函數必須返回false。多數情況下，可以把事件處理器函數定義為匿名函數（見樣本一）。在不可能定義匿名函數的情況下，可以傳遞一個可選的資料對象作為第二個參數（而事件處理器函數則作為第三個參數），見樣本二。
傳回值
jQuery
參數
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外資料對象
fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數
樣本
當每個段落被點擊的時候，彈出其文本。
jQuery 代碼:
$("p").bind("click", function(){
alert( $(this).text() );
});
你可以在事件處理之前傳遞一些附加的資料。
jQuery 代碼:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
通過返回false來取消預設的行為並阻止事件起泡。
jQuery 代碼:
$("form").bind("submit", function() { return false; })
通過使用 preventDefault() 方法只取消預設的行為。
jQuery 代碼:
$("form").bind("submit", function(event){
event.preventDefault();
});
one(type,[data],fn)
為每一個匹配元素的特定事件（像click）綁定一個一次性的事件處理函數。
在每個對象上，這個事件處理函數只會被執行一次。其他規則與bind()函數相同。這個事件處理函數會接收到一個事件對象，可以通過它來阻止（瀏覽器）預設的行為。如果既想取消預設的行為，又想阻止事件起泡，這個事件處理函數必須返回false。
多數情況下，可以把事件處理函數定義為匿名函數（見樣本一）。在不可能定義匿名函數的情況下，可以傳遞一個可選的資料對象作為第二個參數（而事件處理函數則作為第三個參數），見樣本二。
傳回值
jQuery
參數
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外資料對象
fn (Function) : 綁定到每個匹配元素的事件上面的處理函數
樣本
當所有段落被第一次點擊的時候，顯示所有其文本。
jQuery 代碼:
$("p").one("click", function(){
alert( $(this).text() );
});
trigger(type,[data])
在每一個匹配的元素上觸發某類事件。
這個函數也會導致瀏覽器同名的預設行為的執行。比如，如果用trigger()觸發一個‘submit‘，則同樣會導致瀏覽器提交表單。如果要阻止這種預設行為，應返回false。
你也可以觸發由bind()註冊的自訂事件
傳回值
jQuery
參數
type (String) : 要觸發的事件類型
data (Array) : (可選)傳遞給事件處理函數的附加參數
樣本
提交第一個表單，但不用submit()
jQuery 代碼:
$("form:first").trigger("submit")
給一個事件傳遞參數
jQuery 代碼:
$("p").click( function (event, a, b) {
// 一個普通的點擊事件時，a和b是undefined類型
// 如果用下面的語句觸發，那麼a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);
下面的代碼可以顯示一個"Hello World"
jQuery 代碼:
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ‘ ‘ + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
unbind([type],[data])
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
如果沒有參數，則刪除所有綁定的事件。
你可以將你用bind()註冊的自訂事件取消綁定。
I如果提供了事件類型作為參數，則只刪除該類型的綁定事件。
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。
傳回值
jQuery
參數
type (String) : (可選) 事件類型
data (Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數
樣本
把所有段落的所有事件取消綁定
jQuery 代碼:
$("p").unbind()
將段落的click事件取消綁定
jQuery 代碼:
$("p").unbind( "click" )
刪除特定函數的綁定，將函數作為第二個參數傳入
jQuery 代碼:
var foo = function () {
// 處理某個事件的代碼
};
$("p").bind("click", foo);
// ... 當點擊段落的時候會觸發 foo
$("p").unbind("click", foo);
// ... 再也不會被觸發 foo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>巧用jQuery事件</title><style type="text/css">.high{ font-weight:bold; /* 粗體字 */ color : red; /* 字型顏色設定紅色*/}.another{ font-style:italic; color:blue;}</style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var fn1 = function() { alert("click"); }; var fn2 = function() { alert("click again"); } $("p").bind("click", fn1) .bind("click",fn2) .bind("mouseover", function() { $(this).css("background-color", "red") }) .bind("mouseout", function() { $(this).css("background-color", "white") }); $("#btn1").bind("click", function() { $("p").unbind("click", fn2); }); $("p").toggle(function() { $(this).addClass("high"); }, function() { $(this).removeClass("high"); }); $("p").click(function() { alert($(this).text()); }); }) </script></head><body ><p>Hellow</p><input id="btn1" type="button" value="Click Me" /></body></html>
三: 互動處理
hover(over,out)
一個模仿懸停事件（滑鼠移動到一個對象上面及移出這個對象）的方法。這是一個自訂的方法，它為頻繁使用的任務提供了一種“保持在其中”的狀態。
當滑鼠移動到一個匹配的元素上面時，會觸發指定的第一個函數。當滑鼠移出這個元素時，會觸發指定的第二個函數。而且，會伴隨著對滑鼠是否仍然處在特定元素中的檢測（例如，處在div中的映像），如果是，則會繼續保持“懸停”狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。
傳回值
jQuery
參數
over (Function) : 滑鼠移到元素上要觸發的函數
out (Function) : 滑鼠移出元素要觸發的函數
樣本
滑鼠移至上方的表格加上特定的類
jQuery 代碼:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
toggle(fn,fn)
每次點擊後依次調用函數。
如果點擊了一個匹配的元素，則觸發指定的第一個函數，當再次點擊同一元素時，則觸發指定的第二個函數，如果有更多函數，則再次觸發，直到最後一個。隨後的每次點擊都重複對這幾個函數的輪番調用。
可以使用unbind("click")來刪除。
傳回值
jQuery
參數
fn (Function) : 第一數次點擊時要執行的函數。
fn2 (Function) : 第二數次點擊時要執行的函數。
fn3,fn4,... (Function) : 更多次點擊時要執行的函數。
樣本
對錶格的切換一個類
jQuery 代碼:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
對列表的轉場樣式
HTML 程式碼:
<ul>
<li>Go to the store</li>
<li>Pick up dinner</li>
<li>Debug crash</li>
<li>Take a jog</li>
</ul>
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>巧用jQuery事件</title><style type="text/css">.high{ font-weight:bold; /* 粗體字 */ color : red; /* 字型顏色設定紅色*/}.another{ font-style:italic; color:blue;}</style> <!-- 引入jQuery --> <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $("p").bind("mytest", function(event, a, b) { alert(a); alert(b); }) //.trigger("click"); $("#btn1").bind("click", function() { $("p").trigger("mytest", ["aaa", "bbb"]); }); }) </script></head><body ><p>Hellow</p><p>World</p><input id="btn1" type="button" value="Click Me" /></body></html>
四、事件
blur()
觸發每一個匹配元素的blur事件。
這個函數會調用執行綁定到blur事件的所有函數，包括瀏覽器的預設行為。可以通過返回false來防止觸發瀏覽器的預設行為。blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的
傳回值
jQuery
blur(fn)
在每一個匹配元素的blur事件中綁定一個處理函數。
blur事件會在元素失去焦點的時候觸發，既可以是滑鼠行為，也可以是按tab鍵離開的
傳回值
jQuery
參數
fn (Function) : 在每一個匹配元素的blur事件中綁定的處理函數。
樣本
任何段落失去焦點時彈出一個 "Hello World!"在每一個匹配元素的blur事件中綁定的處理函數。
jQuery 代碼:
$("p").blur( function () { alert("Hello World!"); } );
同類用法的事件有：
change().change(fn)
click(), click(fn)
dblclick() , dblclick(fn)
error() , error(fn)
focus() , focus(fn)
keydown() , keydown(fn)
keypress() , keypress(fn)
keyup() , keyup(fn)
load(fn)
mousedown(fn)
mousemove(fn)
mouseout(fn)
mouseover(fn)
mouseup(fn)
resize(fn)
scroll(fn)
select() , select(fn)
submit() , submit(fn)
unload(fn)
四：類比操作：
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
