JavaScript - addEventListener()

JavaScript 的 addEventListener() 方法用於將事件處理程式函式附加到 HTML 元素。這允許您指定一個函式，當指定元素上發生特定事件時將執行該函式。

事件是特定事件或動作，例如使用者點選、按鍵或頁面載入。瀏覽器檢測這些事件並觸發相關的 JavaScript 函式（稱為事件處理程式）以相應地做出響應。

開發者使用 'addEventListener()' 方法將特定的 HTML 元素與特定函式行為關聯起來，當這些事件發生時。事件的示例包括點選、滑鼠移動、鍵盤輸入和文件載入。

語法

addEventListener() 的基本語法如下：

element.addEventListener(event, function, options);

這裡 element 是一個 HTML 元素，例如按鈕、輸入或 div - 可以使用諸如 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector 等方法進行選擇；這些只是一些示例。事件監聽器附加到此特定元素。

引數

addEventListener() 方法接受以下引數：

event - 一個表示動作型別的字串 - 例如，“click”、“mouseover”或“keydown”等等；將作為我們執行給定函式的觸發器。
function - 當指定的事件發生時呼叫的命名、匿名或對現有函式的引用；它本質上是在預定時間點促進執行的操作。
options (可選) - 它允許指定其他設定，特別是與事件監聽器相關的捕獲或 once 行為。

示例

示例：點選按鈕時發出警報

在這個例子中，我們將顯示一個簡單的按鈕，點選時會在螢幕上顯示一個警報。addEventListener 將負責處理“click”事件，這意味著它將在點選按鈕時呼叫一個函式 handleClick，該函式會在螢幕上顯示一個警報。我們使用 getElementById 獲取我們要繫結事件監聽器的按鈕。

這是在表單提交、登入、註冊等方面常用的事件。

<html>
<head>
   <title>Click Event Example</title>
</head>
<body>
   <p> Click the button below to perform an event </p>
   <button id="myButton">Click Me</button>

   <script>
      // Get the button element
      const button = document.getElementById("myButton");
      // Define the event handler function
      function handleClick() {
         alert("Button clicked!");
      }
      // Attach the event listener to the button
      button.addEventListener("click", handleClick);
   </script>

</body>
</html>

示例：滑鼠懸停時更改顏色

在這個例子中，我們有一個 div 標籤，它最初的顏色為淺藍色。將滑鼠懸停在這個 div 標籤上時，它將變為紅色，如果我們移出滑鼠，它將變回藍色。

在這種情況下有兩個事件，mouseover 和 mouseout。mouseover 表示滑鼠移動到元素上，mouseout 表示滑鼠移出元素。

這裡有兩個函式，一個用於 mouseover，一個用於 mouseout。在 mouseover 時，背景顏色屬性設定為 lightcoral（一種紅色），在 mouseout 時，背景顏色設定為淺藍色。

在許多網站的導航欄上懸停滑鼠時，經常可以看到這類滑鼠懸停事件。

<html>
<head>
   <title>Mouseover Event Example</title>
   <style>
      #myDiv {
         width: 600px;
         height: 200px;
         background-color: lightblue;
      }
   </style>
</head>
<body>
   <div id="myDiv">Hover over me</div>
   <script>
      // Get the div element
      const myDiv = document.getElementById("myDiv");

      // Define the event handler function
      function handleMouseover() {
      myDiv.style.backgroundColor = "lightcoral";
      } 

      // Attach the event listener to the div
      myDiv.addEventListener("mouseover", handleMouseover);

      // Additional example: Change color back on mouseout
      function handleMouseout() {
         myDiv.style.backgroundColor = "lightblue";
      }

      myDiv.addEventListener("mouseout", handleMouseout);
   </script>
</body>
</html>

同一個元素可以有多個事件監聽器，例如第二個示例，它有兩個事件監聽器（用於 mouseover 和 mouseout）。可以使用 removeEventListener 函式移除事件監聽器。透過在 options 中傳遞 once: true 引數，我們可以確保事件監聽器在呼叫一次後被移除，這在某些情況下（如支付）非常重要。

需要注意的是，不應該使用“on”字首來指定事件，這意味著對於 click 事件，我們應該將其指定為“click”，而不是“onclick”。

列印頁面