HTML - DOM addEventListener() 方法

HTML DOM 的addEventListener() 方法是 EventTarget 介面的一個方法，它設定了一個函式，該函式將在指定事件傳遞到目標時被呼叫。

目標可以是任何支援事件的物件，一些常見目標是 Element 或其子元素、Document 和 Window。可以向一個元素新增多個事件，而不會覆蓋現有的事件處理程式。

以下互動式示例演示了addEventListener() 方法在不同場景下的用法 -

HTML DOM addEventListener() 方法 - 技術教學

歡迎來到 Tutorialspoint（新增事件後點擊我）

您來對地方學習了……訪問了解更多

語法

以下是 HTML DOM addEventListener() 方法的語法 -

document.addEventListener(event, listener, useCapture);

引數

此方法接受以下引數 -

引數	描述
event	它表示正在使用的事件型別。一些常用的事件包括 click、dblclick、mouseover。
listener	它可以是任何有效的函式，在任何事件發生時都會被呼叫。例如：單擊（事件）時將淺色主題更改為深色主題。
useCapture	這是一個可選引數，用於控制事件傳播。它使用布林值，其中 TRUE 表示捕獲階段，而 FALSE 表示事件冒泡階段。

返回值

此方法不返回任何內容。

示例 1：向元素新增事件

以下示例演示了 HTML DOM addEventListener() 方法的用法。它將 mouseover 事件新增到 div 元素 -

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM addEventListener()</title>
<style>
   #event {
      height: 400px;
      width: 400px;
   }
</style>
</head>
<body>
<p>Mouseover on the div element </p>
<div id="event"> This is a div element.</div>
<script>
   document.getElementById("event").addEventListener("mouseover", fun);
   function fun() {
      document.getElementById("event").style.backgroundColor = "#04af2f";
   }
</script>
</body>
</html>

示例 2：新增多個事件

以下是 HTML DOM addEventListener() 方法的另一個示例。我們使用此方法新增多個事件，例如 click、mouseover、mouseout 等 -

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM addEventListener()</title>
</head>
<body>
<p>This is just a random text to select.</p>
<button id="click">click me</button>
<p id="any"></p>
<script>
   document.addEventListener("mouseover", funtwo);
   document.getElementById("click").addEventListener("click", fun);
   document.addEventListener("mouseout", funthree);
   
   function funtwo() {
      document.getElementById("any").innerHTML = "mouseover event";
   }
   
   function fun() {
      alert("Welcome to Tutorialspoint");
   }
   
   function funthree() {
      document.getElementById("any").innerHTML = "mouseout event";
   }
</script>
</body>
</html>

示例 3：新增多個事件監聽器

在下面的示例中，使用addEventListener() 方法向 mouseover 事件添加了多個事件監聽器或函式 -

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM addEventListener()</title>
<style>
   #event {
      height: 400px;
      width: 400px;
   }
</style>
</head>
<body>
<div id="event" class="out"> This is a div element.</div>
<script>
   document.getElementById("event").addEventListener("mouseover", fun);
   document.getElementById("event").addEventListener("mouseover", funtwo);
   document.getElementById("event").addEventListener("mouseover", funthree);
   function fun() {
      document.getElementById("event").style.backgroundColor = "#04af2f";
   }
   function funtwo() {
      document.getElementById("event").innerHTML = "This is the second function executing with mouseover";
   }
   function funthree() {
      alert("This is third function with mouseover");
   }
</script>
</body>
</html>

支援的瀏覽器

方法
addEventListener()	是 1	是 12	是 1	是 1	是 7

html_dom_document_reference.htm

列印頁面