jQuery - 事件處理

任何現代 Web 應用程式都離不開與之關聯的事件。事件是構建互動式網頁的機制。jQuery 足夠智慧，可以處理 HTML 頁面上生成的任何事件。首先讓我們嘗試瞭解什麼是事件。

什麼是 jQuery 事件？

jQuery 事件是 jQuery（JavaScript）可以檢測到的操作的結果。當這些事件被觸發時，您可以使用自定義函式來對事件執行幾乎任何操作。這些自定義函式稱為事件處理程式。

jQuery 庫提供了處理所有 DOM 事件的方法，並且使完整的事件處理比我們在 JavaScript 中可用的方法容易得多。

以下是一些常見事件的示例：

滑鼠點選
網頁載入
滑鼠懸停在元素上
提交 HTML 表單
鍵盤上的按鍵等。

下表列出了一些重要的 DOM 事件。

滑鼠事件	鍵盤事件	表單事件	文件事件
click	keypress	submit	load
dblclick	keydown	change	resize
hover	keyup	select	scroll
mousedown		blur	unload
mouseup		focusin	ready

本章只介紹了一些事件方法和屬性，有關所有 jQuery 事件方法和屬性的完整參考，您可以查閱jQuery 事件參考。

jQuery 事件繫結語法

假設您想在 HTML 文件中點選一個<div>，然後您想對這次點選執行某些操作。要實現這一點，您必須將 jQuery 的click事件繫結到<div>元素，然後定義針對 click 事件的操作。

以下是將 click 事件繫結到 HTML 文件中所有<div>元素的 jQuery 語法

$("div").click();

下一步是定義針對 click 事件的操作。以下是定義一個函式的語法，該函式將在觸發click事件時執行。此函式稱為jQuery 事件處理程式

$("div").click(function(){
   // jQuery code goes here
});

以下是將 click 事件繫結到任何 DOM 元素的另一種語法

$("div").bind('click', function(){
   // jQuery code goes here
});

jQuery 事件示例

jQuery click 事件

以下是一個將click事件繫結到<div>的示例，其中每當您點選任何 div 時都會顯示一個警報框。嘗試點選圖示以執行以下 jQuery 程式碼

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function(){
         alert('Hi there!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery dblclick 事件

讓我們重寫上面的程式碼，將dblclick事件繫結到<div>，其中每當您雙擊任何 div 時都會顯示一個警報框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").dblclick(function(){
         alert('Hi there!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Double click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mouseenter 事件

以下是一個將mouseenter事件繫結到<div>的示例，其中每當您將游標移到任何 div 上時都會顯示一個警報框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mouseenter(function(){
         alert('Cursor is in!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Bring cursor over any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mouseleave 事件

以下是一個將mouseleave事件繫結到<div>的示例，其中每當您將游標移出 div 時都會顯示一個警報框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mouseleave(function(){
         alert('Curosr is out!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Take cursor out any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mousedown 事件

以下是一個將mousedown事件繫結到<div>的示例，其中每當在任何 div 上按下滑鼠左鍵、中鍵或右鍵時都會顯示一個警報框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mousedown(function(){
         alert('Mouse button is down!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Press mouse button down over any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery mouseup 事件

以下是一個將mouseup事件繫結到<div>的示例，其中每當在任何 div 上釋放滑鼠左鍵、中鍵或右鍵時都會顯示一個警報框。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").mouseup(function(){
         alert('Mouse button is released!');
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Release mouse button over any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

jQuery 事件物件

每當觸發 jQuery 事件時，jQuery 都會將一個事件物件傳遞給每個事件處理程式函式。事件物件提供了有關事件的各種有用資訊。

事件物件通常是不必要的，並且引數被省略，因為當處理程式繫結時通常有足夠的環境來準確地知道在處理程式被觸發時需要做什麼，但是有一些屬性您需要訪問。

以下事件屬性/特性在平臺無關的方式下可用且安全地訪問：

屬性	描述
altKey	如果在觸發事件時按下了 Alt 鍵，則設定為 true，否則設定為 false。在大多數 Mac 鍵盤上，Alt 鍵標記為 Option。
ctrlKey	如果在觸發事件時按下了 Ctrl 鍵，則設定為 true，否則設定為 false。
data	在建立處理程式時，作為 bind() 命令的第二個引數傳遞的值（如果有）。
keyCode	對於 keyup 和 keydown 事件，這將返回按下的鍵。
metaKey	如果在觸發事件時按下了 Meta 鍵，則設定為 true，否則設定為 false。Meta 鍵在 PC 上是 Ctrl 鍵，在 Mac 上是 Command 鍵。
pageX	對於滑鼠事件，指定相對於頁面原點的事件的水平座標。
pageY	對於滑鼠事件，指定相對於頁面原點的事件的垂直座標。
relatedTarget	對於某些滑鼠事件，標識在觸發事件時游標離開或進入的元素。
screenX	對於滑鼠事件，指定相對於螢幕原點的事件的水平座標。
screenY	對於滑鼠事件，指定相對於螢幕原點的事件的垂直座標。
shiftKey	如果在觸發事件時按下了 Shift 鍵，則設定為 true，否則設定為 false。
target	標識觸發事件的元素。
timeStamp	建立事件時的的時間戳（以毫秒為單位）。
type	對於所有事件，指定觸發事件的型別（例如，click）。
which	對於鍵盤事件，指定導致事件的鍵的數字程式碼，對於滑鼠事件，指定按下了哪個按鈕（1 表示左鍵，2 表示中鍵，3 表示右鍵）。

示例

以下是一個示例，說明不同的正方形點選如何給出不同的座標。

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function(eventObj){
         alert('Event type is ' + eventObj.type);
         alert('pageX : ' + eventObj.pageX);
         alert('pageY : ' + eventObj.pageY);
         alert('Target : ' + eventObj.target.innerHTML);
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

事件處理程式中的 this 關鍵字

很多時候，在事件處理程式中使用this關鍵字會變得非常容易。此關鍵字表示觸發事件的 DOM 元素。

以下示例將顯示被點選的<div>的內容

<!doctype html>
<html>
<head>
<title>The jQuery Example</title>
<script src="https://tutorialspoint.tw/jquery/jquery-3.6.0.js"></script>
<script>
   $(document).ready(function() {
      $("div").click(function(){
         alert($(this).text());
      });
   });
</script>
<style>
   div{ margin:10px;padding:12px; border:2px solid #666; width:60px;cursor:pointer}
</style>
</head>
<body>
   <p>Click on any of the squares to see the result:</p>

   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</body>
</html>

刪除事件處理程式

通常，一旦事件處理程式建立，它將在頁面生命週期的剩餘時間內保持有效。當您想要刪除事件處理程式時，可能會有需求。

jQuery 提供了unbind()命令來刪除現有的事件處理程式。unbind() 的語法如下：

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

以下是引數的描述：

eventType - 包含 JavaScript 事件型別（例如 click 或 submit）的字串。有關事件型別的完整列表，請參閱下一節。
handler - 如果提供，則標識要刪除的特定偵聽器。

jQuery 事件參考

您可以在以下頁面獲取所有 jQuery 事件方法和屬性的完整參考：jQuery 事件參考。

列印頁面