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 及更早版本不支援。