HTML - DOM 元素 addEventListener() 方法

addEventListener() 方法允許開發者向元素註冊事件處理程式，使元素能夠響應使用者的操作，例如點選或按鍵。

語法

 element.addEventListener(event, function, useCapture)

引數

引數	描述
event	指定要監聽的事件型別，例如 click、mouseover、keypress 等。
function	定義當指定事件發生時要執行的函式。
useCapture	(可選) 確定事件處理階段
	- 如果為 true，則在捕獲階段執行事件處理程式。
	- 如果為 false (預設)，則在冒泡階段執行事件處理程式。

返回值

addEventListener() 方法不返回值；而是將事件監聽器附加到元素。

HTML DOM 元素 'addEventListener()' 方法示例

以下是一些示例，說明如何使用 addEventListener() 方法來處理各種 HTML DOM 元素上的事件。

點選事件監聽器

此示例將點選事件監聽器附加到按鈕，在點選時觸發操作。當有人點選按鈕時，會彈出一個訊息，顯示“已點選按鈕！”。

  
<!DOCTYPE html>
<html>

<head>
    <title>Click Event Example</title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">addEventListener() Method
    <br><br>Click Event 
    </h3>
    <button id="myButton">Click me</button>

    <script>
        var button = document.getElementById('myButton');
        
        button.addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>

</html>

滑鼠懸停事件監聽器

此示例在滑鼠懸停在 div 上時更改其背景顏色。嘗試將滑鼠移到方塊上！它會變色！這就是 addEventListener() 的魔力。

<!DOCTYPE html>
<html>

<head>
    <title>Mouse Over Event Example</title>
    <style>
        .myDiv {
            width: 200px;
            height: 200px;
            background-color: lightgray;
        }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">addEventListener() Method
    <br><br>Mouse Over Event
    </h3>
    <div class="myDiv" id="myDiv">Hover over me!</div>
    <script>
        var div = document.getElementById('myDiv');
        
        div.addEventListener('mouseover', function() {
            div.style.backgroundColor = 'lightblue';
        });

        div.addEventListener('mouseout', function() {
            div.style.backgroundColor = 'lightgray';
        });
    </script>
</body>

</html>

按鍵事件監聽器

此示例在按下鍵盤上的鍵時顯示按下的鍵。曾經想知道你按下了鍵盤上的哪個鍵嗎？現在你可以用 addEventListener() 找出答案！按下鍵盤上的任何鍵，你都會看到一條訊息告訴你按下了哪個鍵！

<!DOCTYPE html>
<html>

<head>
    <title>Key Press Event Example</title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">addEventListener() Method
    <br><br>Key Press Event
    </h3>
    <p>Press any key.....</p>
    <script>
        document.body.addEventListener('keypress', function(event) {
            alert('You pressed the key: ' + event.key);
        });
    </script>
</body>

</html>

提交表單事件監聽器

此示例阻止預設的表單提交行為，並顯示包含輸入使用者名稱的訊息框。填寫你的姓名並點選“提交”。你會看到一條專屬於你的友好訊息！

<!DOCTYPE html>
<html>

<head>
    <title>Submit Form Event Example</title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">addEventListener() Method
    <br><br>Submit Form Event
    </h3>
    <form id="myForm">
        <input type="text" name="username" placeholder="Enter your name">
        <button type="submit">Submit</button>
    </form>

    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault();
            var username = event.target.elements.username.value;
            alert('Hello, ' + username + '! You submitted the form!');
        });
    </script>
</body>

</html>

更改事件監聽器

此示例在下拉選單中的選擇更改時顯示所選值。嘗試從下拉選單中選擇不同的選項。每次更改選擇時，都會出現一條訊息告訴你選擇了哪個選項！

<!DOCTYPE html>
<html>

<head>
    <title>Change Event Example</title>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">addEventListener() Method
    <br><br>Change Event
    </h3>
    <p>Please Select any Option...</p>
    <select id="mySelect">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    <script>
        document.getElementById('mySelect').addEventListener('change', function(event) {
            alert('You selected option: ' + event.target.value);
        });
    </script>
</body>

</html>

焦點事件監聽器

此示例演示如何使用事件監聽器來響應輸入欄位上的焦點和失焦事件，基於使用者與網頁的互動。

 
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Focus Event Listener</title>
</head>

<body>
  <h2 align = "center">HTML - DOM Element </h2>
  <h3 align = "center">addEventListener() Method
  <br><br>Focus Event
  </h3>
  <label for="nameInput">Enter your name:</label>
  <input type="text" id="nameInput">
  <div id="message"></div>

  <script>
    document.addEventListener
    ('DOMContentLoaded', function() {
      let nameInput = document.getElementById
      ('nameInput');
      let messageBox = document.getElementById
      ('message');

      nameInput.addEventListener('focus', function() {
        messageBox.textContent = 'Input field focused.';
        messageBox.style.color = 'green';
      });

      nameInput.addEventListener('blur', function() {
        messageBox.textContent = 'Input field blurred.';
        messageBox.style.color = 'black';
      });
    });
  </script>
</body>

</html>

動態處理輸入長度限制

此示例向輸入欄位新增按鍵事件監聽器，該監聽器驗證輸入長度，如果超過最大長度則顯示訊息。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Handling input length Event Listener
  </title>
</head>

<body>
  <h2 align = "center">HTML - DOM Element </h2>
  <h3 align = "center">addEventListener() Method
  <br><br>Handling Input Length Event
  </h3>
  <label for="textInput">
  Enter Text (max 10 characters):
  </label>
  <input type="text" id="textInput">
  <div id="message"></div>

  <script>
    document.addEventListener
    ('DOMContentLoaded', function() {
      let textInput=document.getElementById('textInput');
      let messageBox =document.getElementById('message');

      textInput.addEventListener
      ('keypress', function(event) {
        if (textInput.value.length >= 10) {
            // Prevent further keypresses  
          event.preventDefault(); 
          messageBox.textContent = 
          'Maximum length reached.';
        } else {
          messageBox.textContent = '';
        }
      });
    });
  </script>
</body>

</html>

處理滾動事件

此示例向視窗新增滾動事件監聽器，在使用者向下滾動頁面時顯示訊息。

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
    body {
        height: 1500px;  
    }
    #messageBox {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background-color: #f0f0f0;
        padding: 10px;
        border: 1px solid #ccc;
        display: none;
    }
    </style>
</head>

<body>
    <h2 align = "center">HTML - DOM Element </h2>
    <h3 align = "center">addEventListener() Method
    <br><br>Scroll Event
    </h3>
    <p>Scroll down.........</p>

    <div id="messageBox">You scrolled down!</div>
    <script>
    document.addEventListener
    ('DOMContentLoaded', function() {
        let messageBox = document.getElementById
        ('messageBox');

        window.addEventListener('scroll', function() {
        if (window.scrollY > 100) { 
        // Show message after scrolling 100px down
            messageBox.style.display = 'block';
        } else {
            messageBox.style.display = 'none';
        }
        });
    });
    </script>
</body>

</html>

支援的瀏覽器

方法
addEventListener()	是 5.0	是 10.0	是 16.0	是 5.1	是 10.6

html_dom_element_reference.htm

列印頁面