題目1： DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別？
DOM0事件 每個(gè)元素都有自己的事件處理程序?qū)傩?，事件處理程序被認(rèn)為是元素的方法，事件處理程序在元素的作用域下運(yùn)行，this就是當(dāng)前元素，所以點(diǎn)擊button結(jié)果是：btnClick。刪除事件處理程序，只需把元素的onclick屬性賦為null即可。
DOM2事件 定義了addEventListener、removeEventListener兩個(gè)方法用于處理指定和刪除事件處理程序的操作，它可以給一個(gè)同一個(gè)元素添加多個(gè)處理事件。同時(shí)它的this也同樣指向元素本身。
題目2： attachEvent與addEventListener的區(qū)別？
第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類(lèi)型（比如click，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱(chēng)（onclick，onload）
事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window。
為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同，addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無(wú)規(guī)律了)。DOM2是通過(guò)addEventListener綁定的事件, 還有IE下的DOM2事件通過(guò)attachEvent綁定;
題目3： 解釋IE事件冒泡和DOM2事件傳播機(jī)制？
IE瀏覽器
IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數(shù)，不會(huì)用第三個(gè)參數(shù)來(lái)表示是冒泡還是捕獲，它提供了另一個(gè)函數(shù)attachEvent。
ele.attachEvent("onclick", doSomething2);
附：事件冒泡（的過(guò)程）：事件從發(fā)生的目標(biāo)（event.srcElement||event.target）開(kāi)始，沿著文檔逐層向上冒泡，到document為止。
（1）冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕獲型事件(event capturing)：事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā)，然后到最精確(也可以在窗口級(jí)別捕獲事件，不過(guò)必須由開(kāi)發(fā)人員特別指定)。
（3）DOM事件流：同時(shí)支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發(fā)生。兩種事件流會(huì)觸及DOM中的所有對(duì)象，從document對(duì)象開(kāi)始，也在document對(duì)象結(jié)束。
DOM事件模型最獨(dú)特的性質(zhì)是，文本節(jié)點(diǎn)也觸發(fā)事件(在IE中不會(huì))。
題目4：如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
事件的傳播是可以阻止的：
? 在W3c中，使用stopPropagation（）方法
? 在IE下設(shè)置cancelBubble = true；
在捕獲的過(guò)程中stopPropagation（）；后，后面的冒泡過(guò)程也不會(huì)發(fā)生了~
3.阻止事件的默認(rèn)行為，例如click后的跳轉(zhuǎn)
在W3c中，使用preventDefault（）方法；
在IE下設(shè)置window.event.returnValue = false;
題目5：有如下代碼，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var tt = document.querySelector('.ct')
tt.addEventListener('click',function(e){
console.log(e.target.innerText)
})
</script>
題目6： 補(bǔ)全代碼，要求：
當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶(hù)輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶(hù)輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容" value=""/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
var jw= document.querySelector('#btn-add-start')
var qp= document.querySelector('#btn-add-end')
var ct= document.querySelector('.ct')
var nn= document.querySelector('.ipt-add-content')
qp.addEventListener('click',function(){
if(nn.value !== '' ){
var li = document.createElement('li')
li.innerText= nn.value;
ct.appendChild(li);
}
})
jw.addEventListener('click',function(){
if(nn.value !== ''){
var li = document.createElement('li')
li.innerText=nn.value;
ct.insertBefore(li,ct.firstChild);
}
})
ct.addEventListener('click',function(e){
console.log(e.target.innerText)
})
</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'),
childs = ct.querySelectorAll('li'),
preview = document.querySelector('.img-preview');
//方法一：
/*
for(var i=0; i<childs.length; i++){
childs[i].addEventListener('mouseenter', function(){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = ''
});
}
*/
//方法二：
ct.addEventListener('mouseover',function(e){
var img = e.target.getAttribute('data-img');
preview.innerHTML = '<img src = "' + img + '">';
});
</script>
