JavaScript - 事件入門

什麼是事件？

JavaScript 與 HTML 的互動是透過事件來處理的，這些事件在使用者或瀏覽器操作頁面時發生。

頁面載入時，稱為一個事件。當用戶點選一個按鈕時，這個點選也是一個事件。其他例子包括按下任何鍵、關閉視窗、調整視窗大小等事件。

開發人員可以使用這些事件來執行 JavaScript 編寫的響應，這會導致按鈕關閉視窗、向用戶顯示訊息、驗證資料以及幾乎任何其他可以想象到的響應型別。

事件是文件物件模型 (DOM) 3 級的一部分，每個 HTML 元素都包含一組可以觸發 JavaScript 程式碼的事件。

請閱讀本簡短教程以更好地理解 HTML 事件參考。

JavaScript 事件處理程式

事件處理程式可以用作 HTML 元素的屬性。它採用內聯 JavaScript 或函式執行程式碼作為值。

每當任何事件觸發時，它都會呼叫內聯 JavaScript 程式碼或執行回撥函式以執行特定操作。

簡單來說，它用於處理事件。

語法

使用者可以遵循以下語法將事件處理程式與 HTML 元素一起使用。

<div eventHandler = "JavaScript_code"> </div>

在上述語法中，您需要將“eventHandler”替換為實際的事件處理程式，例如“onclick”、“onmouseover”等。“JavaScript_code”應執行函式或執行內聯 JavaScript。

示例：帶有事件處理程式的內聯 JavaScript

在下面的程式碼中，我們建立了 <button> 元素。此外，我們還使用了“onclick”事件處理程式來捕獲按鈕上的點選事件。

我們編寫了內聯 JavaScript 程式碼來處理事件。在內聯 JavaScript 程式碼中，“this”關鍵字表示 <button> 元素，我們將其文字顏色更改為紅色。

<html>
<body>
   <h2> Click the button to Change its text's color </h2>
   <button onclick = "this.style.color='red'"> Click Me </button>
   <div id = "output"> </div>
</body>
</html>

示例：帶有事件處理程式的函式

在下面的程式碼中，我們建立了 <div> 元素並在 <head> 部分中設定了樣式。

我們將“onclick”事件處理程式與 <button> 元素一起使用，當用戶點選按鈕時，它會呼叫 handleClick() 函式。

handleClick() 函式將“event”物件作為引數。在 handleClick() 函式中，我們使用 JavaScript 更改 <div> 元素的背景顏色。

<html>
<head>
   <style>
      #test {
         width: 600px;
         height: 100px;
         background-color: red;
      }
   </style>
</head>
<body>
   <div id = "test"> </div> <br>
   <button onclick = "handleClick()"> Change Div Color </button>
   <script>
      function handleClick(event) {
         var div = document.getElementById("test");
         div.style.backgroundColor = "blue";
      }
   </script>
</body>
</html>

示例：帶有事件處理程式的多個函式

在下面的程式碼中，我們在`

`元素中添加了'onmouseenter'事件處理程式。當用戶將滑鼠游標移入`

`元素時，我們將呼叫changeFontSize()和changeColor()函式。

changeFontSize()函式更改文字的大小，changeColor()函式更改文字的顏色。

這樣，你就可以在一個特定的事件上呼叫多個函式。

<html>
<head>
   <style>
      #test {
         font-size: 15px;
      }
   </style>
</head>
<body>
   <h2> Hover over the below text to customize the font. </h2>
   <div id = "test" onmouseenter = "changeFontSize(); changeColor();"> Hello World! </div> <br>
   <script>
      function changeFontSize(event) {
         document.getElementById("test").style.fontSize = "25px";
      }
      function changeColor(event) {
         document.getElementById("test").style.color = "red";
      }
   </script>
</body>
</html>

JavaScript 事件物件

處理事件的函式將'event'物件作為引數。'event'物件包含有關事件以及發生事件的元素的資訊。

還有各種屬性和方法可用於事件物件以獲取資訊。

物件	描述
Event	它是所有事件物件的父物件。

以下是不同型別事件物件的列表。每個事件物件包含各種事件、方法和屬性。

物件/型別	處理
AnimationEvent	它處理CSS動畫。
ClipboardEvent	它處理剪貼簿的更改。
DragEvent	它處理拖放事件。
FocusEvent	處理焦點事件。
HashChangeEvent	它處理URL錨部分的更改。
InputEvent	處理表單輸入。
KeyboardEvent	處理使用者鍵盤互動。
MediaEvent	它處理媒體相關的事件。
MouseEvent	處理使用者滑鼠互動。
PageTransitionEvent	處理網頁之間的導航。
PopStateEvent	它處理頁面歷史記錄的更改。
ProgressEvent	處理檔案載入的進度。
StorageEvent	處理Web儲存的更改。
TouchEvent	處理裝置螢幕上的觸控互動。
TransitionEvent	處理CSS過渡。
UiEvent	處理使用者介面互動。
WheelEvent	處理使用者滑鼠滾輪互動。

列印頁面