題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
1. DOM0級事件處理程序
在DOM0級事件處理程序，事件名以'on'開頭，因此click事件的事件處理程序就是onclick、load事件的事件處理程序就是onload。
- HTML事件處理程序
一個HTML元素支持事件，可以通過HTML元素的屬性來指定：
<input type="button" value="這是個按鈕" 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;
2. DOM2級事件處理程序
在W3C制定的DOM2規(guī)范中，其中的DOM 事件規(guī)范定義了兩個方法：addEventListener()和removeEventListener()，分別用于添加事件處理程序和刪除事件處理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);
使用DOM2級方法添加事件處理程序時，可以為指定元素添加多個事件處理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", showMessage, false);
btn.addEventListener("click", showMessage2, false);
刪除DOM2級事件處理程序方法如下：
btn.removeEventListener("click", showMessage, false);
題目2： attachEvent與addEventListener的區(qū)別？
在添加事件處理程序時addEventListener和attachEvent主要有幾個區(qū)別：
- 參數(shù)個數(shù)不相同，這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）
- 第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
- 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內運行，this是window，所以剛才例子才會返回undefined，而不是元素id
- 為一個事件添加多個事件處理程序時，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
題目3： 解釋IE事件冒泡和DOM2事件傳播機制？
IE冒泡型事件：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
IE 6.0: div -> body -> html -> documentDOM2級事件傳播包含三個階段:
捕捉階段（capturing），事件從頂級文檔樹節(jié)點一級一級向下遍歷，直到到達該事件的目標節(jié)點。
到達事件的目標節(jié)點，執(zhí)行目標節(jié)點的時間處理程序。
事件起泡（bubbling），事件從目標節(jié)點一級一級向上上溯，直到頂級文檔樹節(jié)點。
題目4：如何阻止事件冒泡？ 如何阻止默認事件？
阻止事件冒泡： e.stopPropagation();
阻止默認事件： e.preventDefault();
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelector(".ct");
ct.addEventListener("click",function(e){
console.log(e.target.innerText)
})
</script>
題目6： 補全代碼，要求：
var endBtn=document.getElementById("btn-add-end");
var startBtn=document.getElementById("btn-add-start");
var contentAdd=document.querySelector(".ipt-add-content");
var ct=document.querySelector(".ct");
function isNull(str){
var reg =/\S+/g
if(reg.test(str)===false){
return alert("請輸入非空字符")
}else{
return true
}
}
ct.addEventListener("click",function(e){
if(e.target.tagName.toLowerCase()==="li"){
console.log(e.target.innerText)
}
})
startBtn.addEventListener("click",function(){
if(isNull(contentAdd.value)===true){
var li = document.createElement("li")
li.innerText = contentAdd.value
ct.insertBefore(li,ct.firstChild)
}
})
endBtn.addEventListener("click",function(){
if(isNull(contentAdd.value)===true){
var li = document.createElement("li")
li.innerText = contentAdd.value
ct.appendChild(li)
}
})
題目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")
var view = document.querySelector(".img-preview")
ct.addEventListener("mouseover",function(e){
if(e.target.tagName.toLowerCase()==="li"){
view.style.display="block";
view.innerText = e.target.getAttribute("data-img")
}
})
ct.addEventListener("mouseout",function(e){
if(e.target.tagName.toLowerCase()==="li"){
view.style.display="none";
}
})
</script>
