1.DOM0 事件和DOM2級在事件監聽使用方式上有什么區別?
- 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級事件只是類似于元素的方法,但它并不是方法,更類似于元素的屬性,所以第二次事件觸發會把第一次**覆蓋**
- DOM2級事件處理程序
- 在W3C制定的DOM2規范中,其中的DOM 事件規范定義了兩個方法: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的區別?
- 參數個數不相同
這個最直觀,addEventListener有三個參數,attachEvent只有兩個,attachEvent添加的事件處理程序只能發生在冒泡階段,addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理(我們一般為了瀏覽器兼容性都設置為冒泡階段)
- 第一個參數意義不同
addEventListener第一個參數是事件類型(比如click,load),而attachEvent第一個參數指明的是事件處理函數名稱(onclick,onload)
- 事件處理程序的作用域不相同
addEventListener的作用域是元素本身,this是指的觸發元素,而attachEvent事件處理程序會在全局變量內運行,this是window,所以剛才例子才會返回undefined,而不是元素id
- 為一個事件添加多個事件處理程序時,執行順序不同addEventListener添加會按照添加順序執行,而attachEvent添加多個事件處理程序時順序無規律(添加的方法少的時候大多是按添加順序的反順序執行的,但是添加的多了就無規律了),所以添加多個的時候,不依賴執行順序的還好,若是依賴于函數執行順序,最好自己處理,不要指望瀏覽器
**3.**解釋IE事件冒泡和DOM2事件傳播機制?
- IE事件冒泡

微軟提出了名為事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻為把一顆石頭投入水中,泡泡會一直從水底冒出水面。也就是說,事件會從最內層的元素開始發生,一直向上傳播,直到document對象。
```<div id="outer">
<p id="inner">Click me!</p>
</div>```
因此上面的例子在事件冒泡的概念下發生click事件的順序應該是p -> div -> body -> html -> document
- DOM2事件傳播機制

“DOM2級事件”中規定的事件流同時支持了事件捕獲階段和事件冒泡階段,而作為開發者,我們可以選擇事件處理函數在哪一個階段被調用。
addEventListener方法用來為一個特定的元素綁定一個事件處理函數,是JavaScript中的常用方法。addEventListener有三個參數:
```element.addEventListener(event, function, useCapture)```
第一個參數是需要綁定的事件,第二個參數是觸發事件后要執行的函數。**而第三個參數默認值是false,表示在事件冒泡的階段調用事件處理函數,如果參數為true,則表示在事件捕獲階段調用處理函數。**
**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)