JavaScript和HTML的交互是通過(guò)事件實(shí)現(xiàn)的。JavaScript采用異步事件驅(qū)動(dòng)編程模型，當(dāng)文檔、瀏覽器、元素或與之相關(guān)對(duì)象發(fā)生特定事情時(shí)，瀏覽器會(huì)產(chǎn)生事件。如果JavaScript關(guān)注特定類型事件，那么它可以注冊(cè)當(dāng)這類事件發(fā)生時(shí)要調(diào)用的句柄
- 事件是某個(gè)行為或者觸發(fā)，比如點(diǎn)擊、鼠標(biāo)移動(dòng)
- 當(dāng)用戶點(diǎn)擊鼠標(biāo)時(shí)
- 當(dāng)網(wǎng)頁(yè)已加載時(shí)
- 當(dāng)圖像已加載時(shí)
- 當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)
- 當(dāng)用戶觸發(fā)按鍵時(shí)...
事件流
事件流描述的是從頁(yè)面中接收事件的順序，比如有兩個(gè)嵌套的div，點(diǎn)擊了內(nèi)層的div，這時(shí)候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)？目前主要有三種模型
IE的事件冒泡：事件開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的元素
Netscape的事件捕獲：不太具體的節(jié)點(diǎn)更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反
DOM事件流：DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段
這種分歧在日常生活中也很常見(jiàn)，舉個(gè)例子，某個(gè)地方出了搶劫事件，我們有多種處理方式
村里先發(fā)現(xiàn)，報(bào)告給鄉(xiāng)里，鄉(xiāng)里報(bào)告到縣城，縣城報(bào)告給市里。。。。
市里先知道這事兒，然后交代給縣城怎么處理，縣城交給到鄉(xiāng)里處理，鄉(xiāng)里交給村里處理
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡
如有以下html
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Page</title>
</head>
<body>
<div>
Click Here</div>
</body>
</html>
事件冒泡
示例:
點(diǎn)擊hello，瀏覽器依次處理hello，box，container。
事件捕獲
示例：
同樣點(diǎn)擊hello，瀏覽器依次處理container,box,hello
事件捕獲與冒泡操作
事件處理程序
我們也稱之為事件偵聽(tīng)器（listener），事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。比如click、load、mouseover等，都是事件類型（俗稱事件名稱），而響應(yīng)某個(gè)事件的方法就叫做事件處理程序或者事件監(jiān)聽(tīng)器
也就是我們需要提前定義好某些事件發(fā)生了該怎么處理，這個(gè)過(guò)程叫做綁定事件處理程序，了解了這些，我們看看如何給元素添加事件處理程序
HTML內(nèi)聯(lián)方式
元素支持的每個(gè)事件都可以使用一個(gè)相應(yīng)事件處理程序同名的HTML屬性指定。這個(gè)屬性的值應(yīng)該是可以執(zhí)行的JavaScript代碼，我們可以為一個(gè)button添加click事件處理程序
<input type="button" value="Click Here" onclick="alert('Clicked!');" /> //不常用
在HTML事件處理程序中可以包含要執(zhí)行的具體動(dòng)作，也可以調(diào)用在頁(yè)面其它地方定義的腳本,剛才的例子可以寫(xiě)成這樣
<input type="button" value="Click Here" onclick="showMessage();" />
在HTML中指定事件處理程序書(shū)寫(xiě)很方便，但是有兩個(gè)缺點(diǎn)。
存在加載順序問(wèn)題，如果事件處理程序在html代碼之后加載，用戶可能在事件處理程序還未加載完成時(shí)就點(diǎn)擊按鈕之類的觸發(fā)事件，存在時(shí)間差問(wèn)題
這樣書(shū)寫(xiě)html代碼和JavaScript代碼緊密耦合，維護(hù)不方便
JavaScript指定事件處理程序
通過(guò)JavaScript指定事件處理程序就是把一個(gè)方法賦值給一個(gè)元素的事件處理程序?qū)傩浴?/p>
每個(gè)元素都有自己的事件處理程序?qū)傩裕@些屬性名稱通常為小寫(xiě)，如onclick等，將這些屬性的值設(shè)置為一個(gè)函數(shù)，就可以指定事件處理程序，如下
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
alert(this.id); //this代表當(dāng)前元素btnClick
};
</script>
這樣處理，事件處理程序被認(rèn)為是元素的方法，事件處理程序在元素的作用域下運(yùn)行，this就是當(dāng)前元素，所以點(diǎn)擊button結(jié)果是：btnClick
這樣還有一個(gè)好處，我們可以刪除事件處理程序，只需把元素的onclick屬性賦為null即可
js制定事件處理多次使用只執(zhí)行最后的事件，如下：
上圖鏈接
DOM2事件處理程序
DOM2級(jí)事件定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作：
addEventListener
removeEventListener
所有的DOM節(jié)點(diǎn)都包含這兩個(gè)方法，并且它們都接受三個(gè)參數(shù)：事件類型
事件處理方法
布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理
剛才的例子我們可以這樣寫(xiě)
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
</script>
