JavaScript中用來監聽事件的方法。這個方法可以讓你向特定的HTML元素（例如: 按鈕、表單、文檔等）添加addEventListener()，當指定的事件發生時，執行相應的 JavaScript 程式碼。

該方法用途

addEventListener()方法可用於監控DIY原生元件。

可從e 原生事件中選取你要監聽的事件元素!

參考資料

https://www.runoob.com/jsref/met-document-addeventlistener.html

https://www.freecodecamp.org/chinese/news/javascript-addeventlistener-example-code/

1. addEventListener() 方法概述

addEventListener() 它屬於 DOM (Document Object Model) 方法，主要用於在指定元素上綁定事件監聽器。

它可以接受三個參數：

  • 事件類型（event type）： 要監聽的事件類型，例如 “click”、”keydown”、”submit” 等。
  • 監聽器函數（listener function）： 當事件發生時要執行的函數。
  • 捕獲階段（useCapture，可選）： 一個Boolean值，表示事件是否在捕獲階段處理。通常使用 false，即在冒泡階段處理事件。

2. 使用 addEventListener() 解釋

文法結構

target.addEventListener(event, function, useCapture)

2.1 添加基本的點擊事件監聽器

我們可能想知道關於事件的更多信息，例如什麼元素被點擊了。在這種情況下，我們需要向函數傳入一個事件參數。

// 獲取元素
var myButton = document.getElementById('myButton');

// 添加點擊事件監聽器
myButton.addEventListener('click', function() {
    alert('按鈕被點擊了！');
});

上面的程式碼中，當擁有 ID 為 ‘myButton’ 的按鈕被點擊時，會彈出一個訊息框。

2.2 使用捕獲階段處理事件

var myDiv = document.getElementById('myDiv');

// 使用捕獲階段處理點擊事件
myDiv.addEventListener('click', function() {
    alert('DIV 元素被點擊了！');
}, true);

在這個例子中，事件處於捕獲階段時執行處理函數。

2.3 帶有事件對象的監聽器函數

var myInput = document.getElementById('myInput');

// 添加輸入事件監聽器，並獲取事件對象
myInput.addEventListener('input', function(event) {
    console.log('輸入的值：', event.target.value);
});

在這裡，event 對象包含了有關事件的信息，例如觸發事件的目標元素等。

3. 完整的範例碼01

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>addEventListener 示例</title>
</head>
<body>

<button id="myButton">點擊我</button>
<div id="myDiv">DIV 元素</div>
<input type="text" id="myInput" placeholder="輸入文字">

<script src="JS/Eventscript.js">
 </script>

</body>
</html>

JavaScript

  // 的點擊事件監聽器
    let myButton = document.getElementById('myButton');
    myButton.addEventListener('click', function() {
        alert('按鈕被點擊了！');
    });

    // 捕獲階段處理點擊事件
    let myDiv = document.getElementById('myDiv');
    myDiv.addEventListener('click', function() {
        alert('DIV 元素被點擊了！');
    }, true);

    // 輸入事件監聽器，並獲取事件對象
    let myInput = document.getElementById('myInput');
    myInput.addEventListener('input', function(e) {
        console.log('輸入的值：', event.target.value);
    });

4. 完整的範例碼02

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event_DOM</title>
</head>
<body>
    
  <h1 class="logo" id="title">Now is 0.</h1>
  <input type="button" value="click to +1" class="btn">

  <script src="JS/Eventscript.js"></script>

</body>
</html>

JavaScript

const title = document.querySelector("h1");
const btn = document.querySelector(".btn");

let counter = 0;


btn.addEventListener("click", function (e) {
  counter++;
  title.textContent = `Now is ${counter}.`;
});

DOM監聽器的使用

從Google Chrome 按下F12，跳出執行視窗，下方的DOM事件監聽器來觀察。

此時可以點開Script 裡面，觀察你HTML的元素，能看到從哪一個js檔案增加的事件觀察器。

By: lioajimzenPosted on Categories : Categories : Backen Tech., Front-End JavaScriptTags: