jquery 是為事件處理特別設(shè)計的。

專注于為中小企業(yè)提供做網(wǎng)站、成都網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)永川免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了數(shù)千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

---

什么是事件？

頁面對不同訪問者的響應(yīng)叫做事件。

事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所調(diào)用的方法。

實例：

• 在元素上移動鼠標(biāo)。
• 選取單選按鈕
• 點擊元素

在事件中經(jīng)常使用術(shù)語"觸發(fā)"（或"激發(fā)"）例如： "當(dāng)您按下按鍵時觸發(fā) keypress 事件"。

常見 DOM 事件：

鼠標(biāo)事件	鍵盤事件	表單事件	文檔/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

---

jQuery 事件方法語法

在 jQuery 中，大多數(shù) DOM 事件都有一個等效的 jQuery 方法。

頁面中指定一個點擊事件：

$("p").click();

下一步是定義什么時間觸發(fā)事件。您可以通過一個事件函數(shù)實現(xiàn)：

$("p").click(function(){

  // action goes here!!

});

---

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允許我們在文檔完全加載完后執(zhí)行函數(shù)。該事件方法在 jQuery 語法 章節(jié)中已經(jīng)提到過。

click()

click() 方法是當(dāng)按鈕點擊事件被觸發(fā)時會調(diào)用一個函數(shù)。

該函數(shù)在用戶點擊 HTML 元素時執(zhí)行。

在下面的實例中，當(dāng)點擊事件在某個

元素上觸發(fā)時，隱藏當(dāng)前的

元素：

實例

$("p").click(function(){

  $(this).hide();

});

嘗試一下 ?

dblclick()

當(dāng)雙擊元素時，會發(fā)生 dblclick 事件。

dblclick() 方法觸發(fā) dblclick 事件，或規(guī)定當(dāng)發(fā)生 dblclick 事件時運行的函數(shù)：

實例

$("p").dblclick(function(){

  $(this).hide();

});

嘗試一下 ?

mouseenter()

當(dāng)鼠標(biāo)指針穿過元素時，會發(fā)生 mouseenter 事件。

mouseenter() 方法觸發(fā) mouseenter 事件，或規(guī)定當(dāng)發(fā)生 mouseenter 事件時運行的函數(shù)：

實例

$("#p1").mouseenter(function(){

  alert("You entered p1!");

});

嘗試一下 ?

mouseleave()

當(dāng)鼠標(biāo)指針離開元素時，會發(fā)生 mouseleave 事件。

mouseleave() 方法觸發(fā) mouseleave 事件，或規(guī)定當(dāng)發(fā)生 mouseleave 事件時運行的函數(shù)：

實例

$("#p1").mouseleave(function(){

  alert("Bye! You now leave p1!");

});

嘗試一下 ?

mousedown()

當(dāng)鼠標(biāo)指針移動到元素上方，并按下鼠標(biāo)按鍵時，會發(fā)生 mousedown 事件。

mousedown() 方法觸發(fā) mousedown 事件，或規(guī)定當(dāng)發(fā)生 mousedown 事件時運行的函數(shù)：

實例

$("#p1").mousedown(function(){

  alert("Mouse down over p1!");

});

嘗試一下 ?

mouseup()

當(dāng)在元素上松開鼠標(biāo)按鈕時，會發(fā)生 mouseup 事件。

mouseup() 方法觸發(fā) mouseup 事件，或規(guī)定當(dāng)發(fā)生 mouseup 事件時運行的函數(shù)：

實例

$("#p1").mouseup(function(){

  alert("Mouse up over p1!");

});

嘗試一下 ?

hover()

hover()方法用于模擬光標(biāo)懸停事件。

當(dāng)鼠標(biāo)移動到元素上時，會觸發(fā)指定的第一個函數(shù)(mouseenter);當(dāng)鼠標(biāo)移出這個元素時，會觸發(fā)指定的第二個函數(shù)(mouseleave)。

實例

$("#p1").hover(function(){

  alert("You entered p1!");

  },

  function(){

  alert("Bye! You now leave p1!");

});

嘗試一下 ?

focus()

當(dāng)元素獲得焦點時，發(fā)生 focus 事件。

當(dāng)通過鼠標(biāo)點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

focus() 方法觸發(fā) focus 事件，或規(guī)定當(dāng)發(fā)生 focus 事件時運行的函數(shù)：

實例

$("input").focus(function(){

  $(this).css("background-color","#cccccc");

});

嘗試一下 ?

blur()

當(dāng)元素失去焦點時，發(fā)生 blur 事件。

blur() 方法觸發(fā) blur 事件，或規(guī)定當(dāng)發(fā)生 blur 事件時運行的函數(shù)：

實例

$("input").blur(function(){

  $(this).css("background-color","#ffffff");

});

嘗試一下 ?

---

比較keypress、keydown與keyup

• keydown：在鍵盤上按下某鍵時發(fā)生，一直按著則會不斷觸發(fā)（opera瀏覽器除外），它返回的是鍵盤代碼;
• keypress：在鍵盤上按下一個按鍵，并產(chǎn)生一個字符時發(fā)生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下并不會產(chǎn)生字符，所以監(jiān)聽無效，換句話說，只有按下能在屏幕上輸出字符的按鍵時keypress事件才會觸發(fā)。若一直按著某按鍵則會不斷觸發(fā)。
• keyup：用戶松開某一個按鍵時觸發(fā)，與keydown相對，返回鍵盤代碼.

網(wǎng)站欄目：創(chuàng)新互聯(lián)jQuery教程：jQuery事件
文章源于：http://uogjgqi.cn/article/djgspij.html