1. DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別？
DOM2級(jí)事件特點(diǎn)：
- 存在兩個(gè)方法弃秆，用于處理制定和刪除事件處理程序的操作（addEventListener和removeEventListener）璧针，接受三個(gè)參數(shù)：事件名稱翠桦、事件處理程序的函數(shù)和布爾值钧敞，布爾值為false表示在事件冒泡階段調(diào)用事件處理程序。
- DOM2級(jí)事件處理程序也會(huì)依附在元素的作用域中運(yùn)行谅阿。
- 優(yōu)點(diǎn)：可同時(shí)綁定幾個(gè)事件半哟，且不會(huì) 被覆蓋；
- 缺點(diǎn)：不兼容签餐。IE不支持DOM2級(jí)事件寓涨，但是有兩個(gè)類似的方法
attachEvent()/detachEvent()。 attachEvent()/detachEvent()只接受兩個(gè)參數(shù)氯檐，沒(méi)有最后一個(gè)布爾值戒良，該事件只能發(fā)生在冒泡階段。
DOM0級(jí)事件特點(diǎn)：
- 在DOM0級(jí)事件中冠摄，事件名均是以on開(kāi)頭的（click—>onclick）糯崎。
- DOM0級(jí)事件處理程序是在元素的作用域中運(yùn)行的，也就是說(shuō)河泳，在事件處理程序中沃呢，this引用就是這個(gè)元素對(duì)象。
- 以這種方式添加的事件處理程序會(huì)在事件流的冒泡階段被處理拆挥。
- 取消事件冒泡：event.stopPropagation()/event.cancleBubble = true(此方法為IE中)薄霜。
- 刪除事件處理程序，將屬性值設(shè)為null即可（btn.onclick=null）纸兔。
- DOM0級(jí)事件不支持事件捕獲。
優(yōu)點(diǎn)：處理事件程序的傳統(tǒng)方式汉矿，第四代web瀏覽器至今，所有瀏覽器都支持流强。
缺點(diǎn)：一個(gè)事件處理程序只能對(duì)應(yīng)一個(gè)處理函數(shù)痹届，同時(shí)綁定多個(gè)事件時(shí)呻待，事件會(huì)被覆蓋
這是因?yàn)閎tn.onclick實(shí)際上就像一個(gè)指針，在執(zhí)行第一個(gè)事件處理程序時(shí)它指向了內(nèi)存中的一個(gè)引用队腐，執(zhí)行第二個(gè)事件處理程序時(shí)它又會(huì)指向另一個(gè)內(nèi)存的引用，最終會(huì)指向最后一個(gè)事件處理函數(shù)的內(nèi)存引用迫淹。
2. attachEvent與addEventListener的區(qū)別秘通？
主要的區(qū)別：
- 參數(shù)個(gè)數(shù)不相同，addEventListener有三個(gè)參數(shù)敛熬，attachEvent還有兩個(gè)肺稀，attatchEvent添加的事件處理程序只能發(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í)順序無(wú)規(guī)律（添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的形导，但是添加多了就無(wú)規(guī)律了），所以添加多個(gè)是時(shí)候不依賴執(zhí)行順序的還好炫隶，若是依賴于函數(shù)執(zhí)行順序阎曹，最好自己處理，不要依賴于瀏覽器
3. 解釋IE事件冒泡和DOM2事件傳播機(jī)制处嫌？
IE事件的冒泡：最內(nèi)部的元素節(jié)點(diǎn)逐級(jí)向上傳播到window(document)。
DOM2級(jí)事件的傳播機(jī)制：三種傳播方式冒泡階段檐薯，捕獲階段和DOM事件流。冒泡階段傳播方式是由下層層向上坛缕。捕獲階段傳播方式是由上層層向下墓猎。DOM事件流是先事件捕獲由上層層向下，然后是實(shí)際目標(biāo)接受事件最后由下層層向上冒泡毙沾。
4. 如何阻止事件冒泡宠页？ 如何阻止默認(rèn)事件？
阻止事件冒泡使用event.stopPropagation()
方法阻止事件在DOM中繼續(xù)傳播勇皇，防止再觸發(fā)定義在別的節(jié)點(diǎn)上的監(jiān)聽(tīng)函數(shù)，但是不包括在當(dāng)前節(jié)點(diǎn)上新定義的事件監(jiān)聽(tīng)函數(shù)
阻止默認(rèn)事件使用event.preventDefault()
方法不會(huì)阻止事件的進(jìn)一步傳播,只要在事件的傳播過(guò)程中（捕獲階段门烂、目標(biāo)階段兄淫、冒泡階段皆可），使用了preventDefault方法捕虽，該事件的默認(rèn)方法就不會(huì)執(zhí)行
5. 有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容房揭。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
function $$(ct){
return document.querySelector(ct)
}
$$('.ct').addEventListener('click',function(e){
console.log(e.target.innerText)
})
</script>
6. 補(bǔ)全代碼晌端，要求：當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(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)容漆羔。
<ul class="ct">
<li>文本1</li>
<li>文本2</li>
<li>文本3</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
function $$(ct) {
return document.querySelector(ct)
}
$$('.ct').addEventListener('click',function(e){
console.log(e.target.innerText)
});
$$('#btn-add-start').addEventListener('click',function(){
var newLi = document.createElement('li');
newLi.innerText = document.querySelector('.ipt-add-content').value;
if( newLi.innerText.match(/\s/))
ct.insertBefore(newLi, ct.firstChild);
});
$$('#btn-add-end').addEventListener('click',function(){
var newLi = document.createElement('li');
newLi.innerText = document.querySelector('.ipt-add-content').value;
if( newLi.innerText.match(/\s/))
ct.appendChild(newLi);
})
</script>
7.補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上亲轨，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片嫡霞。
<ul class="ct">
<li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
<li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
<li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct'),
preview = document.querySelector('.img-preview');
function hanlder(node){
if(node.target.tagName.toLowerCase() === 'li'){
var dataImg = node.target.getAttribute('data-img');
console.log(dataImg);
preview.innerHTML = '<img src="' + dataImg + '">';
}
}
ct.addEventListener('mouse',hanlder,true);
</script>
