jquery事件

//綁定事件
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
//觸發(fā)事件
$("button#demo").click()

1.bind()向匹配元素附加一個或更多事件處理器

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
$(*selector*).bind(*event*,*data*,*function*)
*event*
必需瘦赫。規(guī)定添加到元素的一個或多個事件脖含。
由空格分隔多個事件伸但。必須是有效的事件场斑。

*data*
可選。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。

*function*
必需晕换。規(guī)定當(dāng)事件發(fā)生時運行的函數(shù)。
$(selector).bind({event:function, event:function, ...})

2.當(dāng)輸入域失去焦點 (blur) 時改變其顏色:

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});
//觸發(fā)
$(*selector*).blur()

3.當(dāng)輸入域發(fā)生變化時改變其顏色:

$(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
});
//觸發(fā)
$(*selector*).change()

3.dblclick() 方法

//當(dāng)雙擊按鈕時站宗,隱藏或顯示元素:
$("button").dblclick(function(){
  $("p").slideToggle();
});
//觸發(fā)
$(*selector*).dblclick()

4.delegate() 方法

向匹配元素的當(dāng)前或未來的子元素附加一個或多個事件處理器

//當(dāng)點擊鼠標(biāo)時闸准,隱藏或顯示 p 元素:
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});
//語法
$(*selector*).delegate(*childSelector*,*event*,*data*,*function*)

6.[error()]觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 error 事件

$("img").error(function(){
  $("img").replaceWith("
Missing image!
");
});
//觸發(fā)error
$(*selector*).error()
//綁定
$(*selector*).error(*function*)

event對象方法

7.preventDefault() 方法,isDefaultPrevented()

preventDefault() 方法阻止元素發(fā)生默認(rèn)的行為(例如梢灭,當(dāng)點擊提交按鈕時阻止對表單的提交)夷家。

//防止鏈接打開 URL:
$("a").click(function(event){
  event.preventDefault();
});
$("a").click(function(event){
 event.preventDefault(); 
alert("Default prevented: " +event.isDefaultPrevented()
);});

8.顯示指針的位置event.x

顯示鼠標(biāo)指針的位置:
$(document).mousemove(function(e){
  $("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});

9.event.result

顯示最后一次點擊事件返回的結(jié)果
$("button").click(function(e) {
  $("p").html(e.result);
});

10. event.target 屬性

//顯示哪個 DOM 元素觸發(fā)了事件
$("p, button, h1, h2").click(function(event){
  $("div").html("Triggered by a " + event.target.nodeName + " element.");
});

11.event.type

顯示觸發(fā)了哪種類型的事件:

  $("p").bind('click dblclick mouseover mouseout',function(event){
    $("div").html("事件:" + event.type);
  });

12.event.which

顯示按了哪個鍵:

$(document).ready(function(){
  $("input").keydown(function(event){ 
    $("div").html("Key: " + event.which);
  });
});

13 focus()方法

當(dāng)輸入框獲得焦點時,改變它的背景色:
$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});
//觸發(fā)
$(*selector*).focus()

14.常見事件

[keydown()]
觸發(fā)敏释、或?qū)⒑瘮?shù)綁定到指定元素的 key down 事件
[keypress()]
觸發(fā)库快、或?qū)⒑瘮?shù)綁定到指定元素的 key press 事件
[keyup()]
觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 key up 事件
[mousedown()]
觸發(fā)钥顽、或?qū)⒑瘮?shù)綁定到指定元素的 mouse down 事件
[mouseenter()]
觸發(fā)义屏、或?qū)⒑瘮?shù)綁定到指定元素的 mouse enter 事件
[mouseleave()]
觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse leave 事件
[mousemove()]
觸發(fā)蜂大、或?qū)⒑瘮?shù)綁定到指定元素的 mouse move 事件
[mouseout()]
觸發(fā)闽铐、或?qū)⒑瘮?shù)綁定到指定元素的 mouse out 事件
[mouseover()]
觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 mouse over 事件
[mouseup()]
觸發(fā)奶浦、或?qū)⒑瘮?shù)綁定到指定元素的 mouse up 事件

16.load() 方法

$("img").load(function(){
  $("div").text("Image loaded");
});

17.向匹配元素添加事件處理器兄墅。每個元素只能觸發(fā)一次該處理器。

語法

$(*selector*).one(*event*,*data*,*function*)
*event*
必需澳叉。規(guī)定添加到元素的一個或多個事件隙咸。
由空格分隔多個事件。必須是有效的事件成洗。
*data*
可選五督。規(guī)定傳遞到函數(shù)的額外數(shù)據(jù)。
*function*
必需泌枪。規(guī)定當(dāng)事件發(fā)生時運行的函數(shù)概荷。

18.[ready()]文檔就緒事件(當(dāng) HTML 文檔就緒可用時)

$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideToggle();
  });
});
//三種語法
$(document).ready(*function*)
$().ready(*function*)
$(*function*)

19.

當(dāng)調(diào)整瀏覽器窗口的大小時,發(fā)生 resize 事件碌燕。
resize() 方法觸發(fā) resize 事件,或規(guī)定當(dāng)發(fā)生 resize 事件時運行的函數(shù)继薛。

$(window).resize(function() {
  $('span').text(x+=1);
});
//觸發(fā)
$(*selector*).resize()

20.scroll()

當(dāng)用戶滾動指定的元素時修壕,會發(fā)生 scroll 事件。
scroll 事件適用于所有可滾動的元素和 window 對象(瀏覽器窗口)遏考。
scroll() 方法觸發(fā) scroll 事件慈鸠,或規(guī)定當(dāng)發(fā)生 scroll 事件時運行的函數(shù)。

$("div").scroll(function() {
  $("span").text(x+=1);
});

對元素滾動的次數(shù)進(jìn)行計數(shù):

21.觸發(fā)灌具、或?qū)⒑瘮?shù)綁定到指定元素的 select 事件

當(dāng) textarea 或文本類型的 input 元素中的文本被選擇時青团,會發(fā)生 select 事件譬巫。
select() 方法觸發(fā) select 事件,或規(guī)定當(dāng)發(fā)生 select 事件時運行的函數(shù)督笆。

$("input").select(function(){
  $("input").after(" Text marked!");
});

22.submit() 方法

當(dāng)提交表單時芦昔,顯示警告框:

$("form").submit(function(e){
  alert("Submitted");
});
//觸發(fā)
$(*selector*).submit()

定義和用法
當(dāng)提交表單時,會發(fā)生 submit 事件娃肿。
該事件只適用于表單元素咕缎。
submit() 方法觸發(fā) submit 事件,或規(guī)定當(dāng)發(fā)生 submit 事件時運行的函數(shù)料扰。

23.toggle() 方法

toggle() 方法用于綁定兩個或多個事件處理器函數(shù)凭豪,以響應(yīng)被選元素的輪流的 click 事件。
該方法也可用于切換被選元素的 [hide()] 與 [show()]

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

語法
$(selector).toggle(function1(),function2(),functionN(),...)
(2)隱藏和系那是
$(selector).toggle(switch)
true - 顯示元素
false - 隱藏元素
(2)$(selector).toggle(speed,callback)
speed
毫秒(比如 1500)
"slow"
"normal"
"fast"

21.trigger() 方法

觸發(fā) input 元素的 select 事件

$("button").click(function(){
  $("input").trigger("select");
});
$(*selector*).trigger(*event*,[*param1*,*param2*,...])
*event*
必需晒杈。規(guī)定指定元素要觸發(fā)的事件嫂伞。
可以使自定義事件(使用 bind() 函數(shù)來附加),或者任何標(biāo)準(zhǔn)事件拯钻。

[*param1*,*param2*,...]
可選帖努。傳遞到事件處理程序的額外參數(shù)。
額外的參數(shù)對自定義事件特別有用说庭。

22.triggerHandler() 方法

triggerHandler() 方法觸發(fā)被選元素的指定事件類型然磷。但不會執(zhí)行瀏覽器默認(rèn)動作,也不會產(chǎn)生事件冒泡刊驴。
triggerHandler() 方法與 trigger() 方法類似姿搜。不同的是它不會觸發(fā)事件(比如表單提交)的默認(rèn)行為,而且只影響第一個匹配元素捆憎。

與 trigger() 方法相比的不同之處
它不會引起事件(比如表單提交)的默認(rèn)行為
.trigger() 會操作 jQuery 對象匹配的所有元素舅柜,而 .triggerHandler() 只影響第一個匹配元素。
由 .triggerHandler() 創(chuàng)建的事件不會在 DOM 樹中冒泡躲惰;如果目標(biāo)元素不直接處理它們致份,則不會發(fā)生任何事情。
該方法的返回的是事件處理函數(shù)的返回值础拨,而不是具有可鏈性的 jQuery 對象氮块。此外,如果沒有處理程序被觸發(fā)诡宗,則這個方法返回 undefined滔蝉。

23.unbind() 方法

移除所有 p 元素的事件處理器:

$("button").click(function(){
  $("p").unbind();
});

$(selector).unbind(event,function)
unbind() 方法移除被選元素的事件處理程序。
該方法能夠移除所有的或被選的事件處理程序塔沃,或者當(dāng)事件發(fā)生時終止指定函數(shù)的運行蝠引。
ubind() 適用于任何通過 jQuery 附加的事件處理程序。

24.undelegate() 方法

undelegate() 方法刪除由 delegate() 方法添加的一個或多個事件處理程序。

從所有元素刪除由 delegate() 方法添加的所有事件處理器:
$("body").undelegate();

24. unload 屬性,比如退出時用戶的確定

當(dāng)用戶點擊鏈接離開本頁時螃概,彈出一個消息框:
$(window).unload(function(){
  alert("Goodbye!");
});
當(dāng)用戶離開頁面時矫夯,會發(fā)生 unload 事件。
具體來說吊洼,當(dāng)發(fā)生以下情況時训貌,會發(fā)出 unload 事件:
*點擊某個離開頁面的鏈接
*在地址欄中鍵入了新的 URL
*使用前進(jìn)或后退按鈕
*關(guān)閉瀏覽器
*重新加載頁面
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市融蹂,隨后出現(xiàn)的幾起案子旺订,更是在濱河造成了極大的恐慌,老刑警劉巖超燃,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件区拳,死亡現(xiàn)場離奇詭異,居然都是意外死亡意乓,警方通過查閱死者的電腦和手機(jī)樱调,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來届良,“玉大人笆凌,你說我怎么就攤上這事∈亢” “怎么了乞而?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長慢显。 經(jīng)常有香客問我爪模,道長,這世上最難降的妖魔是什么荚藻? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任屋灌,我火速辦了婚禮,結(jié)果婚禮上应狱,老公的妹妹穿的比我還像新娘共郭。我一直安慰自己,他們只是感情好疾呻,可當(dāng)我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布除嘹。 她就那樣靜靜地躺著,像睡著了一般岸蜗。 火紅的嫁衣襯著肌膚如雪憾赁。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天散吵,我揣著相機(jī)與錄音,去河邊找鬼。 笑死矾睦,一個胖子當(dāng)著我的面吹牛晦款,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播枚冗,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼缓溅,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了赁温?” 一聲冷哼從身側(cè)響起坛怪,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎股囊,沒想到半個月后袜匿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡稚疹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年居灯,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片内狗。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡怪嫌,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出柳沙,到底是詐尸還是另有隱情岩灭,我是刑警寧澤,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布赂鲤,位于F島的核電站噪径,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏蛤袒。R本人自食惡果不足惜熄云,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望妙真。 院中可真熱鬧缴允,春花似錦、人聲如沸珍德。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽锈候。三九已至薄料,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泵琳,已是汗流浹背摄职。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工誊役, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人谷市。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓蛔垢,卻偏偏與公主長得像,于是被迫代替她去往敵國和親迫悠。 傳聞我的和親對象是個殘疾皇子鹏漆,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,060評論 2 355

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

  • 方法描述 bind() 向匹配元素附加一個或更多事件處理器 blur() 觸發(fā)、或?qū)⒑瘮?shù)綁定到指定元素的 blur...
    小沙鷹168閱讀 205評論 0 0
  • jQuery事件 bind()向匹配元素附加一個或更多事件處理器 blur()觸發(fā)创泄、或?qū)⒑瘮?shù)綁定到指定元素的 bl...
    Clover園閱讀 194評論 0 0
  • 總結(jié): 鼠標(biāo)事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,607評論 2 10
  • 本文章是老馬jQuery視頻的講義和上課的代碼艺玲。具體觀看視頻地址:https://chuanke.baidu.co...
    IT老馬閱讀 2,581評論 3 14
  • “啊” 夏湘江打了個哈欠饭聚,好累啊,“湘江碍拆!吃早餐啦”湘江媽媽喊道 “恩若治,就來就來”湘江嘟囔的說。 沒錯感混,這就是...
    薇薇君閱讀 362評論 2 1