例
附加点击事件到<button>元素。 当用户点击该按钮时，输出"Hello World"在<p> id为“演示”元素：
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); 试一试» 更多"Try it Yourself"下面的例子。
定义和用法
所述addEventListener()方法附加一个事件处理程序指定的元素。
提示：使用removeEventListener()方法来删除已安装有一个事件处理程序addEventListener()方法。
提示：使用文件。 addEventListener()方法将事件处理程序附加到文档。
浏览器支持
在表中的数字规定，完全支持方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9 | 1.0 | 1.0 | 7 |
注意： addEventListener()在Internet Explorer 8和更早的版本，以及Opera 6.0及更早版本不支持的方法。 然而，对于这些特定的浏览器版本，你可以使用attachEvent()方法附加的事件处理程序(see "More Examples" below for a cross-browser solution) 。
句法
element .addEventListener( event , function ,
useCapture )
参数值
| 参数 | 描述 |
|---|---|
| event | 需要。 指定事件的名称的字符串。 注意：不要使用"on"前缀。 例如，使用"click" ，而不是"onclick" 。 对于所有的HTML DOM事件的列表，看看我们的完整的HTML DOM事件对象参考 。 |
| function | 需要。 当事件发生时运行的功能。 当事件发生时，事件对象被传递给函数作为第一个参数。 类型的事件对象的取决于指定的事件。 例如， "click"事件属于MouseEvent对象。 |
| useCapture | 可选的。 一个布尔值，指定该事件是否应在捕获或在冒泡阶段来执行。 可能的值：
|
技术细节
| DOM版本： | 2级DOM事件 |
|---|---|
| 返回值： | 无返回值 |
| 更新日志： | 在将useCapture参数在Firefox 6和Opera 11.60成为可选的(has always been optional for Chrome, IE and Safari) |
更多示例
例
您也可以参照一个外部的"named"功能。
该实施例证实了如何当用户点击一个上执行一个功能<button>元素：
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
试一试» 例
您可以将许多事件添加到相同的元素，而不会覆盖现有的事件。
这个例子演示了如何添加相同的两个click事件<button>元素：
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); 试一试» 例
您可以添加不同类型的活动，以相同的元素。
这个例子演示了如何添加相同的许多事件<button>元素：
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); 试一试» 例
当传递的参数值，使用"anonymous function"调用与参数中指定的功能：
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); 试一试» 例
改变的背景颜色<button>元素：
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); 试一试» 例
使用可选的参数将useCapture证明冒泡和捕获之间的区别：
document.getElementById("myDiv").addEventListener("click", myFunction,
true); 试一试» 例
使用removeEventListener()方法，以除去已附接有一个事件处理程序addEventListener()方法：
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); 试一试» 例
对于不支持的浏览器addEventListener()方法，你可以使用attachEvent()方法。
本实施例说明跨浏览器的解决方案：
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} 试一试» 相关页面
JavaScript的教程： HTML DOM事件监听
HTML DOM参考： 文件。 addEventListener()