jQuery中頁面加載完畢調(diào)用的函數(shù)有2種簡寫形式。
$(function(){
});
$().ready(function(){
});
當文檔裝載完畢后，想要為元素綁定事件可以使用bind()方法。bind方法調(diào)用的格式為：
bind(type, [,data], fn);
其中type為事件類型，包括：blur, focus, load, resize, scroll, unload, click, dbclick, mousedown, mouseup, mousemove, mouseover, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup等。第2個參數(shù)作為even.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象，第3個參數(shù)則是處理函數(shù)。
bind()方法可以為元素綁定所有的JavaScript事件，而一些事件（click, mouseover, mouseout）在程序中會經(jīng)常用到，jQuery為此提供了一套簡寫方法
$(function(){
$("selector").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
});
});
jQuery有1個合成事件方法：hover()
hover(enter, leave);
$(function(){
$(selector).hover(function(){
$(this).next().show();
}, function(){
$(this).next().hide();
});
});
hover參數(shù)中兩個函數(shù)對應(yīng)的事件是mouseenter和mouseleave。
toogle()方法如果不帶參數(shù)還有另外一個作用：切換元素的狀態(tài)，如果元素是可見的，則隱藏；如果隱藏的，則顯示出來。
如果父元素和下面的子元素都綁定了click事件，那么如果點擊了子元素那么click事件會先由子元素響應(yīng)，影應(yīng)完子之后父元素也會響應(yīng)click事件，這種響應(yīng)順序就稱之為事件冒泡。
在jQuery中綁定的事件函數(shù)添加1個參數(shù)，這個參數(shù)就是事件對象。jQuery代碼如下：
$("element").bind("click", function(event){
//...
});
當點擊元素時event對象才被創(chuàng)建，且只有事件影應(yīng)函數(shù)才能訪問，函數(shù)結(jié)束之后，事件對象就銷毀了。
如果要停止事件冒泡，在事件響應(yīng)函數(shù)中調(diào)用事件對象的一個方法就行：
event.stopPropagation();
如果要停止元素的默認行為也可以調(diào)用事件對象的一個方法：
event.preventDefault();
接下來好好講講事件對象的各個屬性
- event.type: 可以獲取事件在類型；如果event是click事件響應(yīng)函數(shù)的事件對象，那行event,type就是click
- event.target: 獲取觸發(fā)事件的元素。
- event.pageX和event.pageY: 可以獲取鼠標相對于當前頁面的坐標
- event.which: 獲取鼠標單擊事件中獲取到鼠標的左、中、右鍵在鍵盤事件中獲取鍵盤按鍵：
$("a").mousedown(function(event){
alert(event.which);//1 = 鼠標左右；2 = 中鍵；3 = 右鍵
});
$("input").keyup(function(event){
alert(event.which);
});
- event.metaKey: 為鍵盤事件中獲取ctrl按鍵
移除事件合用jQuery的unbind()方法。
unbind([type], [data]);
$("#btn").unbind("click");//解除所有click響應(yīng)函數(shù)
如果一個按鈕有多個click響應(yīng)函數(shù)，我們只是想要刪除其中一個，那么在綁定響應(yīng)函數(shù)的時候就應(yīng)該為其命名，然后再把響應(yīng)函數(shù)名稱作為第2個參數(shù)傳入unbind函數(shù)中。
$(function(){
$("#btn").bind("click", myFun1 = function(){
$("#test").append("<p>我的綁定函數(shù)1</p>");
}).bind("click", myFun2 = function(){
$("#test").append("<p>我的綁定函數(shù)2</p>");
}).bind("click", myFun3 = function(){
$("#test").append("<p>我的綁定函數(shù)3</p>");
});
$("#delAll").click(function(){
$("#btn").unbind("click");
});
$("#delTwo").click(function(){
$("#btn").unbind("click", myFun2);
});
});
如果想要讓一個事件只響應(yīng)一次，那么可以使用jQuery中的one()方法。使用方法和bind方法類似
$("#btn").one("click", myFun1 = function(){
$("#test").append("<p>我的綁定函數(shù)1</p>");
}).one("click", myFun2 = function(){
$("#test").append("<p>我的綁定函數(shù)2</p>");
}).one("click", myFun3 = function(){
$("#test").append("<p>我的綁定函數(shù)3</p>");
});
目前我們是點擊按鈕來通過鼠標實際點擊來觸發(fā)事件，jQuery實際上還可以對過調(diào)用trigger()方法來模擬觸發(fā)鼠標點擊操作
$("#btn").trigger("click");
$("#btn").click();//也支持簡寫
jQuery的bind()方法可以為dom元素綁定自定義事件。自定義事件只能用trigger()方法模擬執(zhí)行
$("#btn").bind("myClick", function(){
$("#test").append("<p>自定義事件</p>")
});
$("#btn").trigger("myClick");
trigger()方法實際上有2個參數(shù)，第1個參數(shù)之前演示過要觸發(fā)的事件類型，第2個參數(shù)是要傳遞給事件處理函數(shù)的附加依據(jù)，以數(shù)組的形式傳遞。使用格式如下：
$("#btn").bind("myClick", function(event, message1, message2){
$("#test").append("<p>" + message1 + message2 + "</p>");
});
$("#btn").trigger("myClick", ["我的自定義事件", "事件"]);
trigger()方法觸發(fā)事件后，會執(zhí)行瀏覽器的默認操作，如果只想觸發(fā)綁定的事件，而不觸發(fā)瀏覽器默認操作，可以使用jQuery中的triggerHandler()方法。
bind方法一次性還可以添加多個事件類型。
$("#btn").bind("click mouseover", function(event, message1, message2){
$("#test").append("<p>" + message1 + message2 + "</p>");
});