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