1.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0級事件
在DOM0級事件處理程序癌刽，事件名以'on'開頭役首，因此click事件的事件處理程序就是onclick、load事件的事件處理程序就是onload显拜。- HTML事件處理程序
一個HTML元素支持事件坎藐，可以通過HTML元素的屬性來指定：
- HTML事件處理程序
onclick="showMessage()" />```
上面的input對應(yīng)的onclick事件處理程序如下：
```function showMessage(){
alert('itbilu.com');
}```
缺點(diǎn)：上面通過HTML元素屬性添加事件處理程序的方式凶朗，屬于DOM0事件處理程序毅否。通過上面的方式添加會有一定的麻煩惑朦，這會使HTML與JavaScript代碼緊密耦合，對代碼修改和維護(hù)都造成了不便矮台。
- 通過JavaScript添加DOM0事件處理程序
要使用JavaScript指定事件處理程序，首先要獲得一個要操作的對象的引用根时，然后通過其事件處理程序?qū)傩裕ㄟ@些屬性通常全部小寫瘦赫，例如：onclick），指定事件處理程序蛤迎。
```var btn = document.getElementById("myBtn");
btn.onclick = function(){
alert('itbilu.com');
}```
DOM0級事件處理程序可以認(rèn)為是元素的方法确虱。刪除DOM0級事件處理程序，將相應(yīng)屬性值設(shè)置為null即可替裆。
```btn.onclick = null;```
缺點(diǎn)：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值表示：當(dāng)為false或者不寫時庭砍，則按照DOM事件流的順序在冒泡過程中逐級向上進(jìn)行響應(yīng)场晶；當(dāng)為true時，則按照捕獲過程怠缸，先捕獲的先響應(yīng)
**2.**attachEvent與addEventListener的區(qū)別诗轻？
- 參數(shù)個數(shù)不相同
這個最直觀，addEventListener有三個參數(shù)揭北，attachEvent只有兩個扳炬，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段吏颖，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 第一個參數(shù)意義不同
addEventListener第一個參數(shù)是事件類型（比如click，load）鞠柄，而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick侦高，onload）
- 事件處理程序的作用域不相同
addEventListener的作用域是元素本身，this是指的觸發(fā)元素厌杜，而attachEvent事件處理程序會在全局變量內(nèi)運(yùn)行奉呛，this是window，所以剛才例子才會返回undefined夯尽，而不是元素id
- 為一個事件添加多個事件處理程序時瞧壮，執(zhí)行順序不同addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的匙握，但是添加的多了就無規(guī)律了)咆槽，所以添加多個的時候，不依賴執(zhí)行順序的還好圈纺，若是依賴于函數(shù)執(zhí)行順序秦忿，最好自己處理，不要指望瀏覽器
**3.**解釋IE事件冒泡和DOM2事件傳播機(jī)制蛾娶？
- IE事件冒泡
微軟提出了名為事件冒泡(event bubbling)的事件流灯谣。事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面蛔琅。也就是說胎许，事件會從最內(nèi)層的元素開始發(fā)生，一直向上傳播罗售，直到document對象辜窑。
```<div id="outer">
<p id="inner">Click me!</p>
</div>```
因此上面的例子在事件冒泡的概念下發(fā)生click事件的順序應(yīng)該是p -> div -> body -> html -> document
- DOM2事件傳播機(jī)制
“DOM2級事件”中規(guī)定的事件流同時支持了事件捕獲階段和事件冒泡階段，而作為開發(fā)者寨躁，我們可以選擇事件處理函數(shù)在哪一個階段被調(diào)用穆碎。
addEventListener方法用來為一個特定的元素綁定一個事件處理函數(shù)，是JavaScript中的常用方法职恳。addEventListener有三個參數(shù)：
```element.addEventListener(event, function, useCapture)```
第一個參數(shù)是需要綁定的事件惨远，第二個參數(shù)是觸發(fā)事件后要執(zhí)行的函數(shù)。**而第三個參數(shù)默認(rèn)值是false话肖，表示在事件冒泡的階段調(diào)用事件處理函數(shù)北秽，如果參數(shù)為true，則表示在事件捕獲階段調(diào)用處理函數(shù)最筒。**
**4.**如何阻止事件冒泡贺氓？ 如何阻止默認(rèn)事件？
阻止事件冒泡:stopPropagation()
阻止默認(rèn)事件:preventDefault()
示例：彈框點(diǎn)擊空白消失床蜘；阻止鏈接跳轉(zhuǎn)
**5.**有如下代碼辙培，要求當(dāng)點(diǎn)擊每一個元素li時控制臺展示該元素的文本內(nèi)容蔑水。不考慮兼容
**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)