JavaScript HTML DOM 事件监听器

addEventListener() 方法

实例

添加当用户点击按钮时触发的事件监听器:

document.getElementById("myBtn").addEventListener("click", displayDate);

亲自试一试

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

您能够向一个元素添加多个事件处理程序。

您能够向一个元素添加多个相同类型的事件处理程序,例如两个 "click" 事件。

您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素,例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时,JavaScript 与 HTML 标记是分隔的,已达到更佳的可读性;即使在不控制 HTML 标记时也允许您添加事件监听器。

您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型(比如 "click" 或 "mousedown")。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。

注意:请勿对事件使用 "on" 前缀;请使用 "click" 代替 "onclick"。

向元素添加事件处理程序

实例

当用户点击某个元素时提示 "Hello World!":

element.addEventListener("click", function(){ alert("Hello World!"); });

亲自试一试

您也可以引用外部“命名”函数:

实例

当用户点击某个元素时提示 "Hello World!":

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

亲自试一试

向相同元素添加多个事件处理程序

addEventListener() 方法允许您向相同元素添加多个事件,同时不覆盖已有事件:

实例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

亲自试一试

您能够向相同元素添加不同类型的事件:

实例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

亲自试一试

向 Window 对象添加事件处理程序

addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上,比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象,比如 xmlHttpRequest 对象。

实例

添加当用户调整窗口大小时触发的事件监听器:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

亲自试一试

传递参数

当传递参数值时,请以参数形式使用调用指定函数的“匿名函数”:

实例

element.addEventListener("click", function(){ myFunction(p1, p2); });

亲自试一试

事件冒泡还是事件捕获?

在 HTML DOM 中有两种事件传播的方法:冒泡和捕获。

事件传播是一种定义当发生事件时元素次序的方法。假如 <div> 元素内有一个 <p>,然后用户点击了这个 <p> 元素,应该首先处理哪个元素“click”事件?

在冒泡中,最内侧元素的事件会首先被处理,然后是更外侧的:首先处理 <p> 元素的点击事件,然后是 <div> 元素的点击事件。

在捕获中,最外侧元素的事件会首先被处理,然后是更内侧的:首先处理 <div> 元素的点击事件,然后是 <p> 元素的点击事件。

在 addEventListener() 方法中,你能够通过使用“useCapture”参数来规定传播类型:

addEventListener(event, function, useCapture);

默认值是 false,将使用冒泡传播,如果该值设置为 true,则事件使用捕获传播。

实例

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

亲自试一试

removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序:

实例

element.removeEventListener("mousemove", myFunction);

亲自试一试

浏览器支持

表格中的数字规定了完全支持这些方法的首个浏览器版本。

方法
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

注释:IE 8、Opera 6.0 及其更早版本不支持 addEventListener()removeEventListener() 方法。不过,对于这些特殊的浏览器版本,您可以使用 attachEvent() 方法向元素添加事件处理程序,并由 detachEvent() 方法删除:

element.attachEvent(event, function);
element.detachEvent(event, function);

实例

跨浏览器解决方案:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 针对主流浏览器,除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 针对 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
} 

亲自试一试

HTML DOM Event 对象参考手册

如需所有 HTML DOM 事件的列表,请访问我们完整的 HTML DOM Event 对象参考手册

VUE