題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別度迂？
DOM2級事件特點：
1）存在兩個方法展箱，用于處理制定和刪除事件處理程序的操作（addEventListener和removeEventListener），接受三個參數：事件名稱、事件處理程序的函數和布爾值恨闪，布爾值為false表示在事件冒泡階段調用事件處理程序涕刚。
2）DOM2級事件處理程序也會依附在元素的作用域中運行几晤。
3）優(yōu)點：可同時綁定幾個事件宫补，且不會 被覆蓋盛撑；
4）缺點：不兼容碎节。IE不支持DOM2級事件，但是有兩個類似的方法attachEvent()/detachEvent()抵卫。 attachEvent()/detachEvent()只接受兩個參數狮荔，沒有最后一個布爾值胎撇，該事件只能發(fā)生在冒泡階段。
DOM0級事件特點：
1）在DOM0級事件中殖氏，事件名均是以on開頭的（click—>onclick）晚树。
2）DOM0級事件處理程序是在元素的作用域中運行的，也就是說雅采，在事件處理程序中爵憎，this引用就是這個元素對象。
3）以這種方式添加的事件處理程序會在事件流的冒泡階段被處理婚瓜。
4）取消事件冒泡：event.stopPropagation()/event.cancleBubble = true(此方法為IE中)宝鼓。
5）刪除事件處理程序，將屬性值設為null即可（btn.onclick=null）巴刻。
6）DOM0級事件不支持事件捕獲愚铡。
優(yōu)點：處理事件程序的傳統(tǒng)方式，第四代web瀏覽器至今冈涧，所有瀏覽器都支持茂附。
缺點：一個事件處理程序只能對應一個處理函數，同時綁定多個事件時督弓，事件會被覆蓋（這是因為btn.onclick實際上就像一個指針营曼，在執(zhí)行第一個事件處理程序時它指向了內存中的一個引用，執(zhí)行第二個事件處理程序時它又會指向另一個內存的引用愚隧，最終會指向最后一個事件處理函數的內存引用蒂阱。）。
題目2： attachEvent與addEventListener的區(qū)別狂塘？
主要的區(qū)別：
- 參數個數不相同录煤，addEventListener有三個參數，attachEvent還有兩個荞胡，attatchEvent添加的事件處理程序只能發(fā)生在冒泡階段妈踊，addEventListener第三個參數可以決定添加的事件處理程序是在冒泡階段還是捕獲階段處理（一般為了兼容性都設置為冒泡階段）
- 第一個參數意義不同，addEventListener第一個參數是事件類型（比如click,load）泪漂，而attachEvent第一個參數指明的是事件處理函數名稱（onclick,onload）
- 事件處理程序的作用域不相同廊营，addEventListener的作用域是元素本身，this是指的觸發(fā)元素萝勤，而attachEvent事件處理程序會在全局變量內運行露筒，this是window，所以會返回undefined,而不是元素id
- 為一個事件添加多個事件處理程序時敌卓，執(zhí)行順序不同慎式，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律（添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加多了就無規(guī)律了）瘪吏，所以添加多個是時候不依賴執(zhí)行順序的還好癣防，若是依賴于函數執(zhí)行順序，最好自己處理肪虎，不要依賴于瀏覽器
題目3： 解釋IE事件冒泡和DOM2事件傳播機制劣砍？
IE事件的冒泡：最內部的元素節(jié)點逐級向上傳播到window(document)。
DOM2級事件的傳播機制：三種傳播方式冒泡階段扇救，捕獲階段和DOM事件流刑枝。冒泡階段傳播方式是由下層層向上。捕獲階段傳播方式是由上層層向下迅腔。DOM事件流是先事件捕獲由上層層向下装畅，然后是實際目標接受事件最后由下層層向上冒泡。
題目4：如何阻止事件冒泡沧烈？ 如何阻止默認事件掠兄？
阻止事件冒泡使用event.stopPropagation()
方法阻止事件在DOM中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數锌雀，但是不包括在當前節(jié)點上新定義的事件監(jiān)聽函數
阻止默認事件使用event.preventDefault()
方法不會阻止事件的進一步傳播,只要在事件的傳播過程中（捕獲階段蚂夕、目標階段、冒泡階段皆可）腋逆，使用了preventDefault方法婿牍，該事件的默認方法就不會執(zhí)行
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容惩歉。不考慮兼容
<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： 補全代碼等脂，要求：當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串撑蚌；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內容上遥。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結尾添加</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： 補全代碼，要求：當鼠標放置在li元素上争涌，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片粉楚。
<ul class="ct">
<li data-img="1.png">鼠標放置查看圖片1</li>
<li data-img="2.png">鼠標放置查看圖片2</li>
<li data-img="3.png">鼠標放置查看圖片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>
