JavaScript
在本教程中，您将了解 JavaScript 中的 DOM 事件监听器。
了解事件监听器
事件监听器与 事件处理程序 类似，不同之处在于您可以为特定元素上的特定事件分配任意数量的事件监听器。与 事件处理程序 类似，不同之处在于您可以为特定元素上的特定事件分配任意数量的事件监听器。
要了解事件监听器的实际工作原理，让我们看一个简单的示例。 假设您创建了两个函数，并尝试使用 onclick 事件处理程序在单击按钮时执行这两个函数，如下例所示：
<button id="myBtn">Click Me</button>
<script>
// 定义自定义函数
function firstFunction() {
alert("The first function executed successfully!");
}
function secondFunction() {
alert("The second function executed successfully");
}
// 选择按钮元素
var btn = document.getElementById("myBtn");
// 将事件处理程序分配给按钮
btn.onclick = firstFunction;
btn.onclick = secondFunction; // 这个覆盖第一个
</script>如果您运行上面的示例并单击按钮元素，则只会执行 secondFunction()，因为分配第二个事件处理程序会覆盖第一个。
这是这个经典事件模型的主要缺点——您只能将一个事件处理程序分配给特定元素上的特定事件，即每个元素每个事件一个函数。 为了解决这个问题，W3C 引入了更灵活的事件模型，称为事件监听器。
任何 HTML 元素都可以有多个事件监听器，因此您可以为同一元素的同一事件分配多个函数，如下例所示：
<button id="myBtn">Click Me</button>
<script>
// 定义自定义函数
function firstFunction() {
alert("The first function executed successfully!");
}
function secondFunction() {
alert("The second function executed successfully");
}
// 选择按钮元素
var btn = document.getElementById("myBtn");
// 为按钮分配事件监听器
btn.addEventListener("click", firstFunction);
btn.addEventListener("click", secondFunction);
</script>现在，如果你运行上面的例子并点击按钮，这两个函数都会被执行。
除了事件 type 和 listener 函数参数之外，addEventListener() 还接受一个布尔参数 useCapture。 这是一个可选参数，它指定是使用事件冒泡还是事件捕获。 它的基本语法是：
事件冒泡和捕获是传播事件的两种方式。 我们将在下一章详细了解事件传播。
为不同的事件类型添加事件监听器
与事件处理程序一样，您可以为同一元素上的不同事件类型分配不同的事件监听器。 下面的示例将为按钮元素的"click"、"mouseover"和"mouseout"事件分配不同的事件监听器函数。
<button id="myBtn">Click Me</button>
<script>
// 选择按钮元素
var btn = document.getElementById("myBtn");
// 定义自定义函数
function sayHello() {
alert("Hi, how are you doing?");
}
function setHoverColor() {
btn.style.background = "yellow";
}
function setNormalColor() {
btn.style.background = "";
}
// 为按钮分配事件监听器
btn.addEventListener("click", sayHello);
btn.addEventListener("mouseover", setHoverColor);
btn.addEventListener("mouseout", setNormalColor);
</script>将事件监听器添加到窗口对象
addEventListener() 方法允许您将事件监听器添加到任何 HTML DOM 元素、文档对象、窗口对象或任何其他支持事件的对象，例如 XMLHttpRequest 目的。 这是一个将事件监听器附加到窗口"resize"事件的示例：
<div id="result"></div>
<script>
// 定义事件监听函数
function displayWindowSize() {
var w = window.innerWidth;
var h = window.innerHeight;
var size = "Width: " + w + ", " + "Height: " + h;
document.getElementById("result").innerHTML = size;
}
// 将事件监听器函数附加到窗口的调整大小事件
window.addEventListener("resize", displayWindowSize);
</script>删除事件监听器
您可以使用 removeEventListener() 方法来移除之前通过 addEventListener() 附加的事件监听器。 这是一个例子：
<button id="myBtn">Click Me</button>
<script>
//定义函数
function greetWorld() {
alert("Hello World!");
}
// 选择按钮元素
var btn = document.getElementById("myBtn");
// 附加事件监听器
btn.addEventListener("click", greetWorld);
// 移除事件监听器
btn.removeEventListener("click", greetWorld);
</script>注意： 所有主流浏览器都支持 addEventListener() 和 removeEventListener() 方法。 IE 8 及更早版本和 Opera 6.0 及更早版本不支持。