JavaScript和HTML的交互是通過事件實現的。
而事件是某個行為或者觸發，比如點擊、鼠標移動、滾動窗口、鍵盤輸入等。
DOM0、DOM2級的事件區分
DOM0事件綁定監聽函數比較簡單, 有兩種方式:
HTML代碼中直接綁定:
<input type="button" onclick=alert("hello") class="btn">
通過JS代碼指定屬性值:
var btn = document.getElementById('.btn');
btn.onclick =alert("hello")
移除監聽函數：
btn.onclick = null;
DOM0的事件具有極好的跨瀏覽器優勢, 會以最快的速度綁定，同時相同事件只能覆蓋，不會連續觸發。
DOM2級事件
DOM2通過addEventListener、removeEventListener綁定和刪除事件, 比如
<input id="btnClick" type="button" value="Click Here" />
<script>
var handler = function(){
alert("hello")
}
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', handler) // 綁定
btnClick.removeEventListener('click',handler) // 刪除
</script>
而這兩個方法都接收三個參數，分別為：
1、事件類型
2、事件處理方法
3、布爾值 （true表示在捕獲階段調用事件處理程序，false表明在事件冒泡階段處理）
IE則DOM2通過attachEvent、detachEvent綁定和刪除事件，比如：
<input id="btnClick" type="button" value="Click Here" />
<script>
var handler = function(){
alert("hello")
}
var btnClick = document.getElementById('btnClick');
btnClick.attachEvent('onclick', handler) // 綁定
btnClick.detachEvent('onclick',handler) // 刪除
</script>
這兩個方法則接收兩個參數， 分別為：
1、事件處理程序名稱
2、事件處理程序方法
addEventListener和attachEvent主要區別如下：
一、參數個數不相同 addEventListener有三個參數，attachEvent只有兩個，attachEvent添加的事件處理程序只能發生在冒泡階段，addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）
二、第一個參數意義不同，addEventListener第一個參數是事件類型（比如click，load），而attachEvent第一個參數指明的是事件處理函數名稱（onclick，onload）
三、事件處理程序的作用域不相同，addEventListener的作用域是元素本身，而attachEvent事件處理程序會在全局變量內運行
四、為一個事件添加多個事件處理程序時，執行順序不同，addEventListener添加會按照添加順序執行，而attachEvent添加多個事件處理程序時順序無規律
而兼容兩種不同方法，可以借鑒以下John Resig的代碼：
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) { // 支持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) { // 支持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;
}
事件冒泡、捕獲
事件捕獲：當鼠標點擊或者觸發dom事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點擊了子元素，如果父元素通過事件捕獲方式綁定了對應的事件的話，會先觸發父元素綁定的事件。
如：
document (1)
|
html (2)
|
body (3)
|
div (4)
|
target (5)
事件執行順序從1到5
事件冒泡：與事件捕獲相反，事件順序是由內到外進行事件傳播，直到根節點。（IE只支持該類型）
如：
document (5)
|
html (4)
|
body (3)
|
div (2)
|
target (1)
事件執行順序從1到5
而DOM2級事件規定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段。
相當于
(1) document (9)
|
(2) html (8)
|
(3) body (7)
|
(4) div (6)
|
(5) target (5)
