jQuery事件

什麼是事件？

頁面對不一樣訪問者的響應叫作事件。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

實例：

• 在元素上移動鼠標。
• 選取單選按鈕
• 點擊元素

在事件中常用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。

常見 DOM 事件：

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

---

鼠標事件：

jQuery 事件方法語法

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

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

$("p").click();

下一步是定義什麼時間觸發事件。您能夠經過一個事件函數實現：

$("p").click(function(){ // 動做觸發後執行的代碼!! });

---

經常使用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法容許咱們在文檔徹底加載完後執行函數。該事件方法在 jQuery 語法 章節中已經提到過。

click()

click() 方法是當按鈕點擊事件被觸發時會調用一個函數。

該函數在用戶點擊 HTML 元素時執行。

在下面的實例中，當點擊事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素：

實例

$("p").click(function(){
  $(this).hide();
});

嘗試一下

---

dblclick()

當雙擊元素時，會發生 dblclick 事件。

dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數：

實例

$("p").dblclick(function(){
  $(this).hide();
});

嘗試一下 »

---

mouseenter()

當鼠標指針穿過元素時，會發生 mouseenter 事件。

mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數：

實例

$("#p1").mouseenter(function(){
    alert('您的鼠標移到了 id="p1" 的元素上!');
});

嘗試一下 »

---

mouseleave()

當鼠標指針離開元素時，會發生 mouseleave 事件。

mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數：

實例

$("#p1").mouseleave(function(){
    alert("再見，您的鼠標離開了該段落。");
});

嘗試一下 »

---

mousedown()

當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。

mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數：

實例

$("#p1").mousedown(function(){
    alert("鼠標在該段落上按下！");
});

嘗試一下 »

---

mouseup()

當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。

mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數：

實例

$("#p1").mouseup(function(){
    alert("鼠標在段落上鬆開。");
});

嘗試一下 »

---

hover()

hover()方法用於模擬光標懸停事件。

當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

實例

$("#p1").hover(
    function(){
        alert("你進入了 p1!");
    },
    function(){
        alert("拜拜! 如今你離開了 p1!");
    }
);

嘗試一下 »

---

focus()

當元素得到焦點時，發生 focus 事件。

當經過鼠標點擊選中元素或經過 tab 鍵定位到元素時，該元素就會得到焦點。

focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數：

實例

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

嘗試一下 »

---

blur()

當元素失去焦點時，發生 blur 事件。

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

 嘗試一下 »

---

 

鍵盤事件：

一.keypress,keydown,keyup的區別:

•  1.keydown：在鍵盤上按下某鍵時發生,一直按着則會不斷觸發（opera瀏覽器除外）, 它返回的是鍵盤代碼;
•  2.keypress：在鍵盤上按下一個按鍵，併產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字符，因此監聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件纔會觸發。若一直按着某按鍵則會不斷觸發。
•  3.keyup：用戶鬆開某一個按鍵時觸發, 與keydown相對, 返回鍵盤代碼.

二.兩種經常使用用法舉例

案例1:獲取按鍵代碼或字符的ASCII碼

$(window).keydown( function(event){
   // 經過event.which能夠拿到按鍵代碼.  若是是keypress事件中,則拿到ASCII碼.
} );

案例2:傳遞數據給事件處理函數

語法:

jQueryObject.keydown( [[ data ,]  handler ] );

• data: 經過event.data傳遞給事件處理函數的任意數據;
•  handler: 指定的事件處理函數;

 舉例:

// 只容許按下的字母鍵生效, 65~90是全部小寫字母的鍵盤代碼範圍.
var validKeys = { start: 65, end: 90  };
$("#keys").keydown( validKeys, function(event){
    var keys = event.data;  //拿到validKeys對象.
    return event.which >= keys.start && event.which <= keys.end;
} );