什麼是事件？

頁面對不同訪問者的響應叫做事件。

事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。

例項：

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

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

常見 DOM 事件：

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

2 篇筆記

一.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.keypress( [[ data ,]  handler ] );

• data: 通過event.data傳遞給事件處理函式的任意資料;
• handler: 指定的事件處理函式;

舉例:

// 只允許按下的字母鍵生效, 65~90是所有大寫字母的鍵盤程式碼範圍.
var validKeys = { start: 65, end: 90  };
$("#keys").keypress( validKeys, function(event){
    var keys = event.data;  //拿到validKeys物件.
    return event.which >= keys.start && event.which <= keys.end;
} );

關於獲取觸發事件的說明：

1. 獲取事件物件

$(document).ready(function(){
    $(window).keypress(function(event){    
        //獲取事件物件，裡面包含各種有用的資訊。
        console.log(event);
        //console.log(event.which);
    });
});

2. keypress事件獲取鍵入字元

$(window).keypress(function(event){
    //event.which是獲取ASCII碼，前面的函式是將ASCII碼轉換成字元，空格鍵和Enter鍵輸出均為空白。
    console.log(String.fromCharCode(event.which));
    //從event物件中key屬性獲取字元，但是Enter鍵的key值為"Enter"，空白鍵還是空白" "。
    console.log(event.key);
});