初識JavaScript事件
JavaScript語言本身不會產生事件，產生事件的是網頁文檔和網頁文檔中的HTML元素。
什麼是事件呢？事件就是網頁文檔或網頁元素對外發出的通知。當HTML元素與用戶發生交互行為時，該元素會觸發相關的交互事件，例如：當用戶用滑鼠單擊網頁中的按鈕時，按鈕會觸發滑鼠單擊事件（onclick）。元素自身也會觸發事件，例如：當圖片元素加載完成後，會觸發加載完成事件（onload）。
HTML文檔或元素觸發事件時，會對JS發出的通知，通知JS程序HTML文檔或元素與用戶發生了交互，或者內容發生了變化，JS可以處理這些事件。
HTML文檔或元素也稱為DOM對象，DOM是一套Web標準，它定義了訪問HTML文檔對象的一套屬性、方法和事件。DOM實際上是建立網頁與JavaScript語言溝通的橋梁。
JS如何監聽事件？
如果JS需要對DOM對象觸發的事件進行處理，就需要監聽這些事件，瀏覽器會自動調用監聽事件的JS函數。
JS有三種監聽事件的方式：分別是內聯屬性監聽、DOM屬性綁定監聽和使用事件監聽函數。
內聯屬性監聽
內聯屬性監聽是在編寫HTML元素代碼時，直接寫入元素的事件屬性，事件屬性值為JS函數或JS代碼。
案例8：使用jQuery庫的網頁代碼（案例代碼見unit12\case1.html）：
<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"> function add(){ num1 = parseInt(document.getElementById("op1").value); num2 = parseInt(document.getElementById("op2").value); alert(sum(num1,num2)); } function sum(a,b){ return a+b; }</script></head><body><h3>JavaScript開發案例</h3><hr><p> 加數：<input type="text" id="op1" name="op1" maxlength="20" value=""/></p><p> 加數：<input type="text" id="op2" name="op2" maxlength="10" value=""/></p><p><input type="button" value="加法" onclick="add()"/></p></boyd><html>
在上面的案例代碼中，HTML元素button事件屬性onclick的值為JS函數add()，add()函數在script標籤內定義。事件屬性onclick為用戶使用滑鼠單擊元素觸發的事件名稱，button元素onclick屬性的值為add()函數，當用戶使用滑鼠單擊button元素時，瀏覽器會調用add()函數對該事件進行處理。
DOM屬性綁定
DOM是網頁編程接口，也稱為文檔對象模型，它可以被JS調用，用來動態操作或修改網頁元素的內容。
DOM將HTML文檔作為一個樹形結構，網頁文檔中的元素都是樹結構的節點，每個節點都是一個DOM對象，每個DOM對象都有事件屬性，將JS函數賦值給DOM對象的事件屬性，就將DOM觸發的事件和JS函數綁定起來，當DOM事件觸發後，瀏覽器會調用被綁定的JS函數。
<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"> // 網頁加載完成後，onload事件被觸發 window.onload=function (){ // 通過元素id屬性獲取元素對象 button_add = document.getElementById("id_add") // 對象的onclick屬性綁定add函數 button_add.onclick = add button_mul = document.getElementById("id_mul") // 可以直接定義函數綁定到對象的onclick button_mul.onclick = function(event) { num1 = parseInt(document.getElementById("op1").value); num2 = parseInt(document.getElementById("op2").value); alert(num1*num2); } } function add(){ num1 = parseInt(document.getElementById("op1").value); num2 = parseInt(document.getElementById("op2").value); alert(sum(num1,num2)); } function sum(a,b){ return a+b; }</script></head><body><h3>JavaScript開發案例</h3><hr><p> 加數：<input type="text" id="op1" name="op1" maxlength="20" value=""/></p><p> 加數：<input type="text" id="op2" name="op2" maxlength="10" value=""/></p><p><input type="button" id="id_add" value="加法"/></p> <p><input type="button" id="id_mul" value="乘法"/></p></boyd><html>
案例代碼中，onload是windows對象（windows是DOM的窗口對象，表示瀏覽器窗口）屬性，該屬性為網頁加載完成事件，該屬性綁定了處理事件的匿名JS函數。
在onload事件處理函數體內，應用document對象（DOM的文檔對象）的getElementById()獲取button對象，然後綁定button對象的onclick事件處理函數，其中button_add對象綁定了add()函數，button_mul對象綁定了匿名函數。
使用事件監聽函數
該監聽方式是HTML元素對象調用addEventListener()方法，來綁定事件的處理函數。具體使用方法如下：
addEventListener(event, function, useCapture)
參數event是要綁定的對象事件屬性名稱，event是字符串類型。注意：事件名稱不使用"on"前綴，用"click"而不是"onclick"。
參數function是要綁定的函數，也稱為回調函數，當對象事件觸發時，該函數被調用，function可以是已定義的函數名稱，也可以直接定義匿名函數。
參數useCapture是可選參數，類型是布爾類型，設置事件是否在捕獲或冒泡階段執行。該參數主要是設置事件的執行順序，當多個對象元素疊加在窗口的同一區域，若滑鼠單擊多個對象的共同區域時，捕獲階段的事件執行順序是從大到小，冒泡階段的執行順序是從小到大。
useCapture若設置為true，事件處理在捕獲階段執行；useCapture若設置為false，事件處理在冒泡階段執行。默認為false。
<html><head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"> // 網頁加載完成後，onload事件被觸發 window.onload=function (){ // 通過元素id屬性獲取元素對象 button_add = document.getElementById("id_add") // 調用對象的addEventListener方法綁定事件處理函數 // 參數function為已定義的函數名稱 button_add.addEventListener("click",add) button_mul = document.getElementById("id_mul") // 調用對象的addEventListener方法綁定事件處理函數 // 參數function為直接定義的匿名函數 button_mul.addEventListener("click", function(){ num1 = parseInt(document.getElementById("op1").value); num2 = parseInt(document.getElementById("op2").value); alert(num1*num2); }) } function add(){ num1 = parseInt(document.getElementById("op1").value); num2 = parseInt(document.getElementById("op2").value); alert(sum(num1,num2)); } function sum(a,b){ return a+b; }</script></head><body><h3>JavaScript開發案例</h3><hr><p> 加數：<input type="text" id="op1" name="op1" maxlength="20" value=""/></p><p> 加數：<input type="text" id="op2" name="op2" maxlength="10" value=""/></p><p><input type="button" id="id_add" value="加法"/></p> <p><input type="button" id="id_mul" value="乘法"/></p></boyd><html>
JS支持的事件
JS可以處理的DOM對象觸發的事件類型如下表所示：