文章目录
JavaScript HTML DOM 事件监听器
addEventListener()方法
addEventListener() 方法为指定元素指定事件处理程序。
addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。
-
您能够向一个元素添加多个事件处理程序。
-
您能够向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。
-
您能够向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。
addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。
当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；
即使在不控制 HTML 标记时也允许您添加事件监听器。
- 您能够通过使用 removeEventListener() 方法轻松地删除事件监听器。
语法
element.addEventListener(event, function, useCapture);
参数：
-
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
-
第二个参数是当事件发生时我们需要调用的函数。
-
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。
注意：请勿对事件使用 “on” 前缀；请使用 “click” 代替 “onclick”。
向元素添加事件处理程序
实例
当用户点击某个元素时提示 “Hello World!”
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript addEventListener()</h1>
<p>此示例使用 addEventListener() 方法将 click 事件附加到按钮。</p>
<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
alert("Hello World!");
});
</script>
</body>
</html>
//您也可以引用外部“命名”函数：
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 中有两种事件传播的方法：冒泡和捕获。
事件传播是一种定义当发生事件时元素次序的方法。假如
元素内有一个，然后用户点击了这个
元素，应该首先处理哪个元素“click”事件？
- 在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。
- 在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。
在 addEventListener() 方法中，你能够通过使用“useCapture”参数来规定传播类型：
**默认值是 false，将使用冒泡传播，**如果该值设置为 true，则事件使用捕获传播。
实例
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
实例
浏览器支持
表格中的数字规定了完全支持这些方法的首个浏览器版本。
**注释：**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);
}