JavaScript和HTML的交互是通過事件實現(xiàn)的智亮。JavaScript采用異步事件驅(qū)動編程模型，當(dāng)文檔继谚、瀏覽器、元素或與之相關(guān)對象發(fā)生特定事情時阵幸，瀏覽器會產(chǎn)生事件花履。如果JavaScript關(guān)注特定類型事件，那么它可以注冊當(dāng)這類事件發(fā)生時要調(diào)用的句柄
- 事件是某個行為或者觸發(fā)挚赊，比如點擊诡壁、鼠標移動
- 當(dāng)用戶點擊鼠標時
- 當(dāng)網(wǎng)頁已加載時
- 當(dāng)圖像已加載時
- 當(dāng)鼠標移動到元素上時
- 當(dāng)用戶觸發(fā)按鍵時...
事件流
事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div荠割，點擊了內(nèi)層的div妹卿，這時候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)旺矾？目前主要有三種模型
IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
Netscape的事件捕獲：不太具體的節(jié)點更早接收事件夺克，而最具體的元素最后接收事件箕宙，和事件冒泡相反
DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段铺纽，處于目標階段柬帕，事件冒泡階段，首先發(fā)生的是事件捕獲狡门，為截取事件提供機會陷寝，然后是實際目標接收事件，最后是冒泡階段
這種分歧在日常生活中也很常見融撞，舉個例子盼铁，某個地方出了搶劫事件，我們有多種處理方式
村里先發(fā)現(xiàn)尝偎，報告給鄉(xiāng)里饶火，鄉(xiāng)里報告到縣城，縣城報告給市里致扯。肤寝。。抖僵。
市里先知道這事兒鲤看，然后交代給縣城怎么處理，縣城交給到鄉(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>
事件冒泡
示例:
點擊hello曹抬，瀏覽器依次處理hello溉瓶，box，container谤民。
事件捕獲
示例：
同樣點擊hello堰酿，瀏覽器依次處理container,box,hello
事件捕獲與冒泡操作
事件處理程序
我們也稱之為事件偵聽器（listener），事件就是用戶或瀏覽器自身執(zhí)行的某種動作张足。比如click触创、load、mouseover等为牍，都是事件類型（俗稱事件名稱）哼绑，而響應(yīng)某個事件的方法就叫做事件處理程序或者事件監(jiān)聽器
也就是我們需要提前定義好某些事件發(fā)生了該怎么處理顺饮，這個過程叫做綁定事件處理程序，了解了這些凌那，我們看看如何給元素添加事件處理程序
HTML內(nèi)聯(lián)方式
元素支持的每個事件都可以使用一個相應(yīng)事件處理程序同名的HTML屬性指定。這個屬性的值應(yīng)該是可以執(zhí)行的JavaScript代碼吟逝，我們可以為一個button添加click事件處理程序
<input type="button" value="Click Here" onclick="alert('Clicked!');" /> //不常用
在HTML事件處理程序中可以包含要執(zhí)行的具體動作帽蝶，也可以調(diào)用在頁面其它地方定義的腳本,剛才的例子可以寫成這樣
<input type="button" value="Click Here" onclick="showMessage();" />
在HTML中指定事件處理程序書寫很方便，但是有兩個缺點块攒。
存在加載順序問題励稳，如果事件處理程序在html代碼之后加載，用戶可能在事件處理程序還未加載完成時就點擊按鈕之類的觸發(fā)事件囱井，存在時間差問題
這樣書寫html代碼和JavaScript代碼緊密耦合驹尼，維護不方便
JavaScript指定事件處理程序
通過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序?qū)傩浴?/p>
每個元素都有自己的事件處理程序?qū)傩裕@些屬性名稱通常為小寫庞呕，如onclick等新翎，將這些屬性的值設(shè)置為一個函數(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>
這樣處理地啰，事件處理程序被認為是元素的方法，事件處理程序在元素的作用域下運行讲逛，this就是當(dāng)前元素亏吝，所以點擊button結(jié)果是：btnClick
這樣還有一個好處，我們可以刪除事件處理程序盏混，只需把元素的onclick屬性賦為null即可
js制定事件處理多次使用只執(zhí)行最后的事件蔚鸥，如下：
上圖鏈接
DOM2事件處理程序
DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
addEventListener
removeEventListener
所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：事件類型
事件處理方法
布爾參數(shù)许赃，如果是true表示在捕獲階段調(diào)用事件處理程序止喷，如果是false，則是在事件冒泡階段處理
剛才的例子我們可以這樣寫
<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>
