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

打印页面