addEventListener() 方法

首先需要了解addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

语法

element.addEventListener(event, function, useCapture)

参数值

参数	描述
event	必须。字符串，指定事件名。 注意: 不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 提示： 所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。 当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。 可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

 

示例

添加一个简单的监听器

下面这个例子用来展示如何使用 addEventListener() 监听鼠标点击一个元素。

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

// 改变t2的函数
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 为table添加事件监听器
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

// 输出结果：↓
// one
// two

实例

您可以在同一个元素中添加不同类型的事件。

该实例演示了如何在同一个 <button> 元素中添加多个事件：

<button id="myBtn">点我</button>
<p id="demo"></p>

var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() 
{
    document.getElementById("demo").innerHTML += "鼠标经过!<br>"
}
function mySecondFunction() 
{
    document.getElementById("demo").innerHTML += "点击!<br>"
}
function myThirdFunction() 
{
    document.getElementById("demo").innerHTML += "鼠标离开!<br>"
}

 

备注

为什么要使用 addEventListener?

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：

• 它允许给一个事件注册多个监听器。 特别是在使用AJAX库，JavaScript模块，或其他需要第三方库/插件的代码。
• 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
• 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。