前端開發-jQuery事件
一、什麽是事件
頁面對不同訪問者的響應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。
實例:
- 在元素上移動鼠標。
- 選取單選按鈕
- 點擊元素
在事件中經常使用術語"觸發"(或"激發")例如: "當您按下按鍵時觸發 keypress 事件"。
常見 DOM 事件
二、jQuery事件方法語法
在jQuery中,大多數dom事件都有一個等效的jQuery方法
頁面中指定一個點擊事件:
$("p").click();
下一步是定義什麽時間觸發事件。您可以通過一個事件函數實現:
$("p").click(function(){ });
三、常用的 jQuery 事件方法
- $(document).ready()
$(document).ready() 方法允許我們在文檔完全加載完後執行函數。
- click()
click() 方法是當按鈕點擊事件被觸發時會調用一個函數。
該函數在用戶點擊 HTML 元素時執行。
在下面的實例中,當點擊事件在某個 <p> 元素上觸發時,隱藏當前的 <p> 元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.js"> </script> <script> $(document).ready(function () { $("p").click(function () { $(this).hide(); }); }); </script> </head> <body> <p>如果你點我,我就會消失。</p> <p>點我消失!</p> <p>點我也消失!</p> </body> </html>
- dblclick()
當雙擊元素時,會發生 dblclick 事件。
dblclick() 方法觸發 dblclick 事件,或規定當發生 dblclick 事件時運行的函數:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"> </script> <script> $(document).ready(function () { $("p").dblclick(function () { $(this).hide(); }); }); </script> </head> <body> <p>雙擊鼠標左鍵的,我就消失。</p> <p>雙擊我消失!</p> <p>雙擊我也消失!</p> </body> </html>
-
mouseenter()
當鼠標指針穿過元素時,會發生 mouseenter 事件。
mouseenter() 方法觸發 mouseenter 事件,或規定當發生 mouseenter 事件時運行的函數:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"> </script> <script> $(document).ready(function () { $("#p1").mouseenter(function () { alert("你的鼠標移動到了id=p1的元素上!") }) }) </script> </head> <body> <p id="p1">鼠標指針進入此處,會看到彈窗</p> </body> </html>
-
mouseleave()
當鼠標指針離開元素時,會發生 mouseleave 事件。
mouseleave()方法觸發mouseleave事件,或規定當發生mouseleave事件時運行的函數:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"> </script> <script> $(document).ready(function () { $("#p1").mouseleave(function () { alert("再見,您的鼠標已經離開了該段落") }) }) </script> </head> <body> <p id="p1">這是一個段落。</p> </body> </html>
-
mousedown()
當鼠標指針移動到元素上方,並按下鼠標按鍵時,會發生 mousedown 事件。
mousedown() 方法觸發 mousedown 事件,或規定當發生 mousedown 事件時運行的函數:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"> </script> <script> $(document).ready(function () { $("#p1").mousedown(function () { alert("鼠標在該段落上按下!") }) }) </script> </head> <body> <p id="p1">這是一個段落。</p> </body> </html>
-
mouseup()
當在元素上松開鼠標按鈕時,會發生 mouseup 事件。
mouseup() 方法觸發 mouseup 事件,或規定當發生 mouseup 事件時運行的函數:
-
$(document).ready(function () { $("#p1").mouseup(function () { alert("鼠標在該段落上按下!") })
-
hover()
hover()方法用於模擬光標懸停事件。
當鼠標移動到元素上時,會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時,會觸發指定的第二個函數(mouseleave)。
$(document).ready(function () { $("#p1").hover(function () { alert("你進入了p1!"); }, function () { alert("拜拜!現在你離開了P1") }); });
- focus()
當元素獲得焦點時,發生 focus 事件。
當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時,該元素就會獲得焦點。
focus() 方法觸發 focus 事件,或規定當發生 focus 事件時運行的函數:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery-3.3.1.js"> </script> <script> $(document).ready(function () { $("input").focus(function () { $(this).css("background-color","#ccc"); }); $("input").blur(function () { $(this).css("background-color","#ffffff"); }); }); </script> </head> <body> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"> </body> </html>
比較keypress、keydown與keyup
- keydown:在鍵盤上按下某鍵時發生,一直按著則會不斷觸發(opera瀏覽器除外),它返回的是鍵盤代碼;
- keypress:在鍵盤上按下一個按鍵,並產生一個字符時發生, 返回ASCII碼。註意: shift、alt、ctrl等鍵按下並不會產生字符,所以監聽無效,換句話說,只有按下能在屏幕上輸出字符的按鍵時keypress事件才會觸發。若一直按著某按鍵則會不斷觸發。
- keyup:用戶松開某一個按鍵時觸發,與keydown相對,返回鍵盤代碼.
前端開發-jQuery事件