天天看點

jQuery 事件

jQuery 是為事件處理特别設計的。

頁面對不同通路者的響應叫做事件。

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

執行個體:

在元素上移動滑鼠。

選取單選按鈕

點選元素

在事件中經常使用術語"觸發"(或"激發")例如:

"當您按下按鍵時觸發 keypress 事件"。

常見 DOM 事件:

滑鼠事件

鍵盤事件

表單事件

文檔/視窗事件

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

blur

unload

hover

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

頁面中指定一個點選事件:

$("p").click();

下一步是定義了點選後觸發事件。您可以通過一個事件函數實作:

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

// 動作觸發後執行的代碼!!

});

$(document).ready() 方法允許我們在文檔完全加載完後執行函數。該事件方法在

jQuery 文法 章節中已經提到過。

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

該函數在使用者點選 HTML 元素時執行。

在下面的執行個體中,當點選事件在某個 <p> 元素上觸發時,隐藏目前的 <p> 元素:

$(this).hide();

當輕按兩下元素時,會發生 dblclick 事件。

dblclick() 方法觸發 dblclick 事件,或規定當發生 dblclick 事件時運作的函數:

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

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

mouseenter() 方法觸發 mouseenter 事件,或規定當發生 mouseenter 事件時運作的函數:

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

alert('您的滑鼠移到了 id="p1" 的元素上!');

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

mouseleave() 方法觸發 mouseleave 事件,或規定當發生 mouseleave 事件時運作的函數:

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

alert("再見,您的滑鼠離開了該段落。");

當滑鼠指針移動到元素上方,并按下滑鼠按鍵時,會發生 mousedown 事件。

mousedown() 方法觸發 mousedown 事件,或規定當發生 mousedown 事件時運作的函數:

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

alert("滑鼠在該段落上按下!");

當在元素上松開滑鼠按鈕時,會發生 mouseup 事件。

mouseup() 方法觸發 mouseup 事件,或規定當發生 mouseup 事件時運作的函數:

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

alert("滑鼠在段落上松開。");

hover()方法用于模拟光标懸停事件。

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

$("#p1").hover(

function(){

alert("你進入了 p1!");

},

alert("拜拜! 現在你離開了 p1!");

}

);

當元素獲得焦點時,發生 focus 事件。

當通過滑鼠點選選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦點。

focus() 方法觸發 focus 事件,或規定當發生 focus 事件時運作的函數:

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

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

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

blur() 方法觸發 blur 事件,或規定當發生 blur 事件時運作的函數:

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

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