1.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0級事件
在DOM0級事件處理程序，事件名以'on'開頭，因此click事件的事件處理程序就是onclick、load事件的事件處理程序就是onload。- HTML事件處理程序
一個HTML元素支持事件，可以通過HTML元素的屬性來指定：
- HTML事件處理程序
onclick="showMessage()" />```
上面的input對應的onclick事件處理程序如下：
```function showMessage(){
alert('itbilu.com');
}```
缺點：上面通過HTML元素屬性添加事件處理程序的方式，屬于DOM0事件處理程序。通過上面的方式添加會有一定的麻煩，這會使HTML與JavaScript代碼緊密耦合，對代碼修改和維護都造成了不便。
- 通過JavaScript添加DOM0事件處理程序
要使用JavaScript指定事件處理程序，首先要獲得一個要操作的對象的引用，然后通過其事件處理程序屬性（這些屬性通常全部小寫，例如：onclick），指定事件處理程序。
```var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert('itbilu.com');
}```
DOM0級事件處理程序可以認為是元素的方法。刪除DOM0級事件處理程序，將相應屬性值設置為null即可。
```btn.onclick = null;```
缺點：DOM0級事件只是類似于元素的方法，但它并不是方法，更類似于元素的屬性，所以第二次事件觸發(fā)會把第一次**覆蓋**
- DOM2級事件處理程序
- 在W3C制定的DOM2規(guī)范中，其中的DOM 事件規(guī)范定義了兩個方法：addEventListener()和removeEventListener()，分別用于添加事件處理程序和刪除事件處理程序。
```var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);
btn.removeEventListener("click",showMessage)//指定同一地址才能刪除事件```
- 使用DOM2級方法添加事件處理程序時，可以為指定元素添加多個事件處理程序。
```var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);
btn.addEventListener("click", showMessage2, false);```
- 刪除DOM2級事件處理程序方法如下：
```btn.removeEventListener("click", showMessage, false);```
這里的boolean值表示：當為false或者不寫時，則按照DOM事件流的順序在冒泡過程中逐級向上進行響應；當為true時，則按照捕獲過程，先捕獲的先響應
**2.**attachEvent與addEventListener的區(qū)別？
- 參數(shù)個數(shù)不相同
這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）
- 第一個參數(shù)意義不同
addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
- 事件處理程序的作用域不相同
addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內運行，this是window，所以剛才例子才會返回undefined，而不是元素id
- 為一個事件添加多個事件處理程序時，執(zhí)行順序不同addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
**3.**解釋IE事件冒泡和DOM2事件傳播機制？
- IE事件冒泡
微軟提出了名為事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最內層的元素開始發(fā)生，一直向上傳播，直到document對象。
```<div id="outer">
<p id="inner">Click me!</p>
</div>```
因此上面的例子在事件冒泡的概念下發(fā)生click事件的順序應該是p -> div -> body -> html -> document
- DOM2事件傳播機制
“DOM2級事件”中規(guī)定的事件流同時支持了事件捕獲階段和事件冒泡階段，而作為開發(fā)者，我們可以選擇事件處理函數(shù)在哪一個階段被調用。
addEventListener方法用來為一個特定的元素綁定一個事件處理函數(shù)，是JavaScript中的常用方法。addEventListener有三個參數(shù)：
```element.addEventListener(event, function, useCapture)```
第一個參數(shù)是需要綁定的事件，第二個參數(shù)是觸發(fā)事件后要執(zhí)行的函數(shù)。**而第三個參數(shù)默認值是false，表示在事件冒泡的階段調用事件處理函數(shù)，如果參數(shù)為true，則表示在事件捕獲階段調用處理函數(shù)。**
**4.**如何阻止事件冒泡？ 如何阻止默認事件？
阻止事件冒泡:stopPropagation()
阻止默認事件:preventDefault()
示例：彈框點擊空白消失；阻止鏈接跳轉
**5.**有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
**6.**
[鏈接](http://js.jirengu.com/cixebosivi/1/edit?html,console,output)
**7.**
[鏈接](http://js.jirengu.com/cixebosivi/1/edit?html,console,output)
**8.**
[Github](https://github.com/24Magic/EventListenerCompatibility)