1、DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別？
Dom0級(jí)事件處理程序是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩裕ㄟ^將事件處理程序設(shè)置為null刪除綁定在元素上的事件處理程序。這種方法無法給一個(gè)事件添加多個(gè)事件處理程序，后面的程序會(huì)覆蓋前面的程序。
// 添加事件處理程序
var btn=document.querySelector("#btn");
btn.onclick=function () {
alert(this.id);
}
// 刪除事件處理程序
btn.onclick=null;
而Dom2級(jí)定義了addEventListener()和removeEventListener()用于處理指定和刪除事件處理程序。所有Dom節(jié)點(diǎn)都包含這兩個(gè)方法，并且它們都接受3個(gè)參數(shù)，要處理的事件名、作為事件處理程序的函數(shù)和一個(gè)布爾值。最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
var btn=document.querySelector("#btn");
var handler=function(){
alert(this.id);
}
// 指定事件處理程序
btn.addEventListener("click",handler,false);
// 刪除事件處理程序
btn.removeEventListener("click",handler,false);
但是通過removeEventListener()函數(shù)來移除事件處理程序時(shí)，移除時(shí)的參數(shù)必須與添加處理程序時(shí)使用的參數(shù)相同，這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除。如：
var btn=document.querySelector("#btn");
// 指定事件處理程序
btn.addEventListener("click",function(){
alert(this.id);
},false);
// 刪除事件處理程序,不會(huì)生效
btn.removeEventListener("click",function(){
alert(this.id);
},false);
二者區(qū)別：
使用Dom2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序，而Dom0級(jí)為一個(gè)事件添加多個(gè)事件處理程序時(shí)，后面的程序會(huì)覆蓋前面的。
2、 attachEvent與addEventListener的區(qū)別？
- 參數(shù)個(gè)數(shù)不相同，這個(gè)最直觀，addEventListener有三個(gè)參數(shù)，attachEvent只有兩個(gè)，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類型（比如click，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
- 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window，所以剛才例子才會(huì)返回undefined，而不是元素id
- 為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同，addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個(gè)的時(shí)候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
3、解釋IE事件冒泡和DOM2事件傳播機(jī)制？
IE的事件流叫做事件冒泡（event bubbling），即事件開始時(shí)由最具體的元素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收，然后逐級(jí)向上傳播到較為不具體的節(jié)點(diǎn)（文檔）。以下面的HTML 頁面為例：
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
如果你單擊了頁面中的元素，那么這個(gè)click事件會(huì)按照如下順序傳播：
(1) <div>
(2) <body>
(3) <html>
(4) document
也就是說，click事件首先在
元素上發(fā)生，而這個(gè)元素就是我們單擊的元素。然后，click事件沿DOM樹向上傳播，在每一級(jí)節(jié)點(diǎn)上都會(huì)發(fā)生，直至傳播document對(duì)象。
DOM2級(jí)事件傳播機(jī)制規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機(jī)會(huì)。然后是實(shí)際的目標(biāo)接收到事件。最后一個(gè)階段是冒泡階段，可以在這個(gè)階段對(duì)事件做出響應(yīng)。以前面簡(jiǎn)單的HTML頁面為例，單擊<div>元素會(huì)按照下圖所示順序觸發(fā)事件。
在DOM 事件流中，實(shí)際的目標(biāo)（<div>元素）在捕獲階段不會(huì)接收到事件。這意味著在捕獲階段，事件從document到<html>再到<body>后就停止了。下一個(gè)階段是“處于目標(biāo)”階段，于是事件在<div>上發(fā)生，并在事件處理中被看成冒泡階段的一部分。然后，冒泡階段發(fā)生，事件又傳播回文檔。
4、如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
事件冒泡是javascript事件的基本特性，但事件冒泡也會(huì)導(dǎo)致一些麻煩。
<p>
<button>點(diǎn)擊我試試</button>
添加一個(gè)段落
</p>
點(diǎn)擊button，因?yàn)槭录蛏厦芭荩瑫?huì)觸發(fā)p的click事件，但我們的期望是點(diǎn)擊button，不觸發(fā)p的click事件，可以調(diào)用stopPropagation()方法阻止事件繼續(xù)傳播
$('button').on('click',function(e){
e.stopPropagation()
})
如果你只想阻止默認(rèn)行為，而不想阻止事件冒泡，可以使用preventDefault()方法取消瀏覽器對(duì)當(dāng)前事件的默認(rèn)行為
事件的應(yīng)用
1、實(shí)現(xiàn)Tab切換的功能
2、實(shí)現(xiàn)模態(tài)框功能，點(diǎn)擊模態(tài)框不隱藏，點(diǎn)擊關(guān)閉以及模態(tài)框以外的區(qū)域模態(tài)框隱藏
3、當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片
4、當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶輸入的非空字符串。當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。
5、有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
