jQuery中的事件

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>");
});
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市当窗,隨后出現(xiàn)的幾起案子够坐,更是在濱河造成了極大的恐慌,老刑警劉巖超全,帶你破解...
    沈念sama閱讀 222,627評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件咆霜,死亡現(xiàn)場離奇詭異邓馒,居然都是意外死亡嘶朱,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評論 3 399
  • 文/潘曉璐 我一進店門光酣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來疏遏,“玉大人,你說我怎么就攤上這事救军〔埔欤” “怎么了?”我有些...
    開封第一講書人閱讀 169,346評論 0 362
  • 文/不壞的土叔 我叫張陵唱遭,是天一觀的道長戳寸。 經(jīng)常有香客問我,道長拷泽,這世上最難降的妖魔是什么疫鹊? 我笑而不...
    開封第一講書人閱讀 60,097評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮司致,結(jié)果婚禮上拆吆,老公的妹妹穿的比我還像新娘。我一直安慰自己脂矫,他們只是感情好枣耀,可當我...
    茶點故事閱讀 69,100評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著庭再,像睡著了一般捞奕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上拄轻,一...
    開封第一講書人閱讀 52,696評論 1 312
  • 那天缝彬,我揣著相機與錄音,去河邊找鬼哺眯。 笑死谷浅,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播一疯,決...
    沈念sama閱讀 41,165評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼撼玄,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了墩邀?” 一聲冷哼從身側(cè)響起掌猛,我...
    開封第一講書人閱讀 40,108評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎眉睹,沒想到半個月后荔茬,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,646評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡竹海,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,709評論 3 342
  • 正文 我和宋清朗相戀三年慕蔚,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斋配。...
    茶點故事閱讀 40,861評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡孔飒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出艰争,到底是詐尸還是另有隱情坏瞄,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布甩卓,位于F島的核電站鸠匀,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏逾柿。R本人自食惡果不足惜缀棍,卻給世界環(huán)境...
    茶點故事閱讀 42,196評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鹿寻。 院中可真熱鬧睦柴,春花似錦、人聲如沸毡熏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽痢法。三九已至狱窘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間财搁,已是汗流浹背蘸炸。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留尖奔,地道東北人搭儒。 一個月前我還...
    沈念sama閱讀 49,287評論 3 379
  • 正文 我出身青樓穷当,卻偏偏與公主長得像,于是被迫代替她去往敵國和親淹禾。 傳聞我的和親對象是個殘疾皇子馁菜,可洞房花燭夜當晚...
    茶點故事閱讀 45,860評論 2 361

推薦閱讀更多精彩內(nèi)容