題目1： DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？
DOM0級事件監聽就是把一個方法賦值給一個元素的事件處理程序屬性。將這些屬性的值設置為一個函數，就可以指定事件處理程序，一個事件只能綁定一次，且新方法覆蓋老方法。
DOM2級事件監聽定義了兩個方法用于處理指定和刪除事件處理程序的操作：
addEventListener、removeEventListener。所有DOM節點都包含這兩個方法，并且他們都接受三個參數：事件類型、事件處理方法、布爾參數。可以選擇按照冒泡順序處理還是捕獲順序處理。
題目2： attachEvent與addEventListener的區別？
- 參數個數不同：addEventListener有三個參數，attachEvent只有兩個，attachEvent添加的事件處理程序只能發生在冒泡階段，addEventListener第三個參數布爾值可以決定添加的事件處理程序實在捕獲階段還是冒泡階段處理
- 第一個參數不同：addEventListener第一個參數是事件類型（click,load等）,而attachEvent第一個參數是事件處理函數的名字（onclick,onload等）；
- 事件處理程序的作用域不同：addEventListener作用域是元素本身，this是指的觸發元素,而attachEvent事件處理程序會在全局變量內運行，this是指window；
- 為一個事件添加事件處理程序時，執行順序不同：addEventListener添加會按照添加順序執行，而attachEvent添加多個事件處理程序時順序無規律，方法較少時一般是按添加順序反向執行，多方法就無規律。
題目3： 解釋IE事件冒泡和DOM2事件傳播機制？
ie事件冒泡：是指事件從事件目標節點逐層步的往上層節點傳播(如下圖)，ie只支持這一種傳播機制
事件冒泡模型
dom2事件傳播機制：事件從頂層節點一級一級往下層傳播，接著到達目標節點，這部分叫做時間捕獲階段。然后事件又從目標節點逐層往上層節點傳播，這部分叫做事件冒泡，這個完整的事件流就是dom2時間的傳播機制了(如下圖)。
DOM事件流
題目4：如何阻止事件冒泡？ 如何阻止默認事件？
// DOM瀏覽器
e.stopPropagation(); // 阻止冒泡
event.preventDefault(); //阻止默認事件
// IE瀏覽器
e.cancelBubble = true; // 阻止冒泡
event.returnValue = false; // 阻止默認事件
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
var ct = document.getElementsByTagName("li");
for (var i = 0; i < ct.length; i++) {
ct[i].addEventListener("click", function () {
console.log(this.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>
//你的代碼
var newUl= document.getElementsByClassName("ct")[0];
var content = document.getElementsByClassName("ipt-add-content")[0];
var startBtn = document.getElementById("btn-add-start");
var endBtn = document.getElementById("btn-add-end");
var firstChild = document.getElementsByTagName("li")[0];
newUl.addEventListener("click",function(e){
if(e.target.tagName.toLowerCase() === "li"){
console.log(e.target.innerText )
}
})
startBtn.addEventListener("click",function(){
var newLi = document.createElement("li");
newLi.innerText = content.value;
if(newLi.innerText !=='' ){
newUl.insertBefore(newLi,firstChild);
}else{
alert("請輸入內容！");
}
});
endBtn.addEventListener("click",function(){
var newLi = document.createElement("li");
newLi.innerText = content.value;
if(newLi.innerText !== ''){
newUl.appendChild(newLi);
}else{
alert("請輸出內容！");
}
})
</script>
題目7： 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前li元素的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.getElementsByTagName("li");
var showImg = document.getElementsByClassName("img-preview")[0];
for(var i = 0; i<ct.length; i++){
ct[i].addEventListener("mouseover",function(){
var imgSrc = this.getAttribute("data-img");
showImg.innerHTML = '<img src = "'+ imgSrc +'">';
})
}
//事件代理實現
var ct1 = document.getElementsByClassName("ct")[0];
var showImg = document.getElementsByClassName("img-preview")[0];
ct1.addEventListener("mouseover",function(e){
if(e.target.tagName.toLowerCase() === "li"){
var imgSrc = e.target.getAttribute("data-img");
showImg.innerHTML = '<img src = "'+ imgSrc +'">';
}
})
</script>
