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>");
});