JavaScript和HTML的交互是通過事件實現的。JavaScript采用異步事件驅動編程模型，當文檔、浏覽器、元素或與之相關對象發生特定事情時，浏覽器會產生事件。如果JavaScript關注特定類型事件，那麼它可以注冊當這類事件發生時要調用的句柄。
事件流
事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div，點擊了內層的div，這時候是內層的div先出發click事件還是外層先觸發？目前主要有三種模型
IE的事件冒泡：事件開始時由最具體的元素接收，然後逐級向上傳播到較為不具體的元素
Netscape的事件捕獲：不太具體的節點更早接收事件，而最具體的元素最後接收事件，和事件冒泡相反
DOM事件流：DOM2級事件規定事件流包括三個階段，事件捕獲階段，處於目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然後是實際目標接收事件，最後是冒泡句階段。
Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡
如有以下html，點擊div區域
復制代碼 代碼如下:
<!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>
事件處理程序（handler）
我們也稱之為事件偵聽器（listener），事件就是用戶或浏覽器自身執行的某種動作。比如click、load、moseover等，都是事件類型（俗稱事件名稱），而響應某個事件的方法就叫做事件處理程序或者事件監聽器或者事件句柄，事件處理程序名字是：on+事件類型。
了解了這些，我們看看如何給元素添加事件處理程序
HTML事件處理程序元素支持的每個事件都可以使用一個相應事件處理程序同名的HTML屬性指定。這個屬性的值應該是可以執行的JavaScript代碼，我們可以為一個button添加 click事件處理程序
復制代碼 代碼如下:
<input type="button" value="Click Here" onclick="alert('Clicked!');" />
在HTML事件處理程序中可以包含要執行的具體動作，也可以調用在頁面其它地方定義的腳本,剛才的例子可以寫成這樣
復制代碼 代碼如下:
<input type="button" value="Click Here" onclick="showMessage();" />
<script type="text/javascript">
function showMessage() {
alert('Clicked!');
}
在HTML中指定事件處理程序書寫很方便，但是有兩個缺點。
首先，存在加載順序問題，如果事件處理程序在html代碼之後加載，用戶可能在事件處理程序還未加載完成時就點擊按鈕之類的觸發事件，存在時間差問題。
其次，這樣書寫html代碼和JavaScript代碼緊密耦合，維護不方便。
JavaScript指定事件處理程序通過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序屬性。每個元素都有自己的事件處理程序屬性，這些屬性名稱通常為小寫，如onclick等，將這些屬性的值設置為一個方法，就可以指定事件處理程序，如下
復制代碼 代碼如下:
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
alert(this.id);
};
</script>
這樣處理，事件處理程序被認為是元素的方法，事件處理程序在元素的作用域下運行，this就是當前元素，所以點擊button結果是：btnClick
這樣還有一個好處，我們可以刪除事件處理程序，只需把元素的onclick屬性賦為null即可
DOM2事件處理程序DOM2級事件定義了兩個方法用於處理指定和刪除事件處理程序的操作：addEventListener和removeEventListener。所有的DOM節點都包含這兩個方法，並且它們都接受三個參數：事件類型、事件處理方法、一個布爾值。最後布爾參數如果是true表示在捕獲階段調用事件處理程序，如果是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>
上面代碼為button添加了click事件的處理程序，在冒泡階段觸發，與上一種方法一樣，這個程序也是在元素的作用域下運行，不過有一個好處，我們可以為click事件添加多個處理程序
復制代碼 代碼如下:
<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);
btnClick.addEventListener('click', function() {
alert('Hello!');
}, false);
</script>
這樣兩個事件處理程序會在用戶點擊button後按照添加順序依次執行。
通過addEventListener添加的事件處理程序只能通過removeEventListener移除，移除時參數與添加的時候相同，這就意味著剛才我們添加的匿名函數無法移除，因為匿名函數雖然方法體一樣，但是句柄卻不相同，所以當我們有移除事件處理程序的時候可以這樣寫
復制代碼 代碼如下:
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);
</script>
下面就是老生常談的IE兼容性問題了。。。
IE並不支持addEventListener和removeEventListener方法，而是實現了兩個類似的方法attachEvent和detachEvent，這兩個方法都接收兩個相同的參數，事件處理程序名稱和事件處理程序方法，由於IE指支持事件冒泡，所以添加的程序會被添加到冒泡階段。
使用attachEvent添加事件處理程序可以如下
復制代碼 代碼如下:
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.attachEvent('onclick' , handler);
</script>
結果是undefined，很奇怪，一會兒我們會介紹到
使用attachEvent添加的事件處理程序可以通過detachEvent移除，條件也是相同的參數，匿名函數不能被移除。
復制代碼 代碼如下:
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.attachEvent('onclick', handler);
btnClick.detachEvent('onclick', handler);
</script>
跨浏覽器的事件處理程序
前面內容我們可以看到，在不同的浏覽器下，添加和移除事件處理程序方式不相同，要想寫出跨浏覽器的事件處理程序，首先我們要了解不同的浏覽器下處理事件處理程序的區別
在添加事件處理程序事addEventListener和attachEvent主要有幾個區別
1. 參數個數不相同，這個最直觀，addEventListener有三個參數，attachEvent只有兩個，attachEvent添加的事件處理程序只能發生在冒泡階段，addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了浏覽器兼容性都設置為冒泡階段）
2. 第一個參數意義不同，addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload）
3. 事件處理程序的作用域不相同，addEventListener得作用域是元素本身，this是指的觸發元素，而attachEvent事件處理程序會在全局變量內運行，this是window，所以剛才例子才會返回undefined，而不是元素id
4. 為一個事件添加多個事件處理程序時，執行順序不同，addEventListener添加會按照添加順序執行，而attachEvent添加多個事件處理程序時順序無規律(添加的方法少的時候大多是按添加順序的反順序執行的，但是添加的多了就無規律了)，所以添加多個的時候，不依賴執行順序的還好，若是依賴於函數執行順序，最好自己處理，不要指望浏覽器
了解了這四點區別後我們可以嘗試寫一個浏覽器兼容性比較好的添加事件處理程序方法
復制代碼 代碼如下:
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
}
else if (node.attachEvent) {
node.attachEvent('on' + type, handler, );
return true;
}
return false;
}
這樣，首先我們解決了第一個問題參數個數不同，現在三個參數，采用事件冒泡階段觸發，第二個問題也得以解決，如果是IE，我們給type添加上on，第四個問題目前還沒有解決方案，需要用戶自己注意，一般情況下，大家也不會添加很多事件處理程序，試試這個方法感覺很不錯，但是我們沒有解決第三個問題，由於處理程序作用域不同，如果handler內有this之類操作，那麼就會出錯在IE下，實際上大多數函數都會有this操作。
復制代碼 代碼如下:
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
}
else if (node.attachEvent) {
node.attachEvent('on' + type, function() { handler.apply(node); });
return true;
}
return false;
}
這樣處理就可以解決this的問題了，但是新的問題又來了，我們這樣等於添加了一個匿名的事件處理程序，無法用detachEvent取消事件處理程序，有很多解決方案，我們可以借鑒大師的處理方式，jQuery創始人John Resig是這樣做的
復制代碼 代碼如下:
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
}
else if (node.attachEvent) {
node['e' + type + handler] = handler;
node[type + handler] = function() {
node['e' + type + handler](window.event);
};
node.attachEvent('on' + type, node[type + handler]);
return true;
}
return false;
}
在取消事件處理程序的時候
復制代碼 代碼如下:
function removeEvent(node, type, handler) {
if (!node) return false;
if (node.removeEventListener) {
node.removeEventListener(type, handler, false);
return true;
}
else if (node.detachEvent) {
node.detachEvent('on' + type, node[type + handler]);
node[type + handler] = null;
}
return false;
}
John Resig很巧妙地利用了閉包，看起來很不錯。
事件對象
在觸發DOM上的某個事件的時候會產生一個事件對象event，這個對象包含著所有與事件有關的信息，包括產生事件的元素、事件類型等相關信息。所有浏覽都支持event對象，但支持方式不同。
DOM中的事件對象兼容DOM的浏覽器會產生一個event對象傳入事件處理程序中。應用一下剛才我們寫的addEvent方法
復制代碼 代碼如下:
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);
點擊button的時候我們可以看到彈出內容是click的彈窗
event對象包含與創建它的特定事件有關的屬性和方法，觸發事件的類型不同，可用的屬性和方法也不同，但是所有事件都會包含
屬性/方法
類型
讀/寫
說明
bubbles Boolean 只讀 事件是否冒泡 cancelable Boolean 只讀 是否可以取消事件的默認行為 currentTarget Element 只讀 事件處理程序當前處理元素 detail Integer 只讀 與事件相關細節信息 eventPhase Integer 只讀 事件處理程序階段：1 捕獲階段，2 處於目標階段，3 冒泡階段 preventDefault() Function 只讀 取消事件默認行為 stopPropagation() Function 只讀 取消事件進一步捕獲或冒泡 target Element 只讀 事件的目標元素 type String 只讀 被觸發的事件類型 view AbstractView 只讀 與事件關聯的抽象視圖，等同於發生事件的window對象在事件處理程序內部，this始終等同於currentTarget，而target是事件的實際目標。要阻止事件的默認行為，可以使用preventDefault（）方法，前提是cancelable值為true，比如我們可以阻止鏈接導航這一默認行為
復制代碼 代碼如下:
document.getElementsByTagName('a').onclick = function (e) {
e.preventDefault();
}
stopPaopagation()方法可以停止事件在DOM層次的傳播，即取消進一步的事件捕獲或冒泡。我們可以在button的事件處理程序中調用stopPropagation（）從而避免注冊在body上的事件發生
復制代碼 代碼如下:
var handler = function (e) {
alert(e.type);
e.stopPropagation();
}
addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);
若是注釋掉e.stopPropagation(); 在點擊button的時候，由於事件冒泡，body的click事件也會觸發，但是調用這句後，事件會停止傳播。
IE中的事件對象訪問IE中的event對象有幾種不同的方式，取決於指定事件處理程序的方法。直接為DOM元素添加事件處理程序時，event對象作為window對象的一個屬性存在
復制代碼 代碼如下:
var handler = function () {
var e = window.event;
alert(e.type);
}
var btnClick = document.getElementById('btnClick');
btnClick.onclick = handler;
我們通過window.event取得了event對象，並檢測到了其類型，可是如果事件處理程序是通過attachEvent添加的，那麼就會有一個event對象被傳入事件處理程序中
復制代碼 代碼如下:
var handler = function (e) {
alert(e.type);
}
var btnClick = document.getElementById('btnClick');
attachEvent(btnClick, handler);
當然這時候也可以通過window對象訪問event，方便起見，我們一般會傳入event對象，IE中所有的事件都包含以下屬性方法
屬性/方法
類型
讀/寫
說明
cancelBulle Boolean 讀/寫 默認為false，設置為true後可以取消事件冒泡 returnValue Boolean 讀/寫 默認為true，設為false可以取消事件默認行為 srcElement Element 只讀 事件的目標元素 type String 只讀 被觸發的事件類型跨浏覽器的事件對象雖然DOM和IE的event對象不同，但基於它們的相似性，我們還是可以寫出跨浏覽器的事件對象方案復制代碼 代碼如下:
function getEvent(e) {
return e || window.event;
}
function getTarget(e) {
return e.target || e.scrElement;
}
function preventDefault(e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
}
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
常用HTML事件
有一些HTML事件我們會經常用到，這些事件不一定與用戶操作有關，這裡只是簡單提及，詳細用法大家就得百度谷歌了
1.load：當頁面完全加載後在window上觸發，當圖像加載完成後在img元素上觸發，或當嵌入內容加載完成時，在object元素上觸發
2.unload：頁面完全卸載後在window上觸發，或嵌入內容卸載後在object元素觸發
3.select：用戶選擇文本框中的字符時觸發
4.change：文本框焦點變化後其值改變時觸發
5.submit：用戶提交表單的時候觸發
6.resize：窗口或框架大小變化的時候在window上觸發
7.scrool：用戶滾動帶滾動條的元素時，在該元素上觸發
8.focus：頁面或元素獲得焦點時在window及相應元素上觸發
9.blur：頁面或元素失去焦點時在window及相應元素上觸發
10.beforeunload：頁面卸載前在window上觸發
11.mousewheel：不算HTML的，當用戶通過鼠標滾輪與頁面交互，在垂直方向滾動頁面時觸發