題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
DOM0級事件
var btn=document.querySelector("#btn");
btn.onclick=function(){
alert(1);
}
優(yōu)點：簡單，兼容所有瀏覽器
缺點：一個事件處理程序只能對應一個處理函數(shù)
DOM1級事件
var btn=document.querySelector("#btn");
//非IE
btn.addEventListener("click",function(){
alert(1);
}，false)
//IE
btn.attrachEvent("onclick",function(){
alert(1);
})
優(yōu)點：同一個事件處理程序可以對應多個函數(shù)
缺點：關于事件的內置函數(shù) 老IE瀏覽器存在兼容問題，老IE瀏覽器有一套自己的事件內置函數(shù)，
再coding事件程序時，需要多方面考慮到老IE瀏覽器兼容問題。
題目2： attachEvent與addEventListener的區(qū)別？
區(qū)別：
1，attachEvent只能兼容IE6，7，8上面，addEventListener只能兼容非IE6，7，8和非IE瀏覽器
2，事件名的寫法不同，事件名加on和不加on，比如點擊事件：btn.attachEvent("onclick",fn) btn.addEventListener("click",fn)
3，attachEvent有兩個參數(shù)，addEventListener可以有三個參數(shù)，addEventListener的前兩個參數(shù)相同，第三個參數(shù)是true或false,默認false,false指冒泡階段觸發(fā)事件，ture指捕獲階段觸發(fā)函數(shù)；因此attachEvent的事件函數(shù)都添加到冒泡階段
4，事件處理函數(shù)里面的this指向不同，attachEvent調用的函數(shù)里面的this指向window,addEventListener調用的函數(shù)里面的this指向觸發(fā)該事件的節(jié)點
5，attachEvent與addEventListener在執(zhí)行綁定函數(shù)的順序不一樣，前者倒序執(zhí)行，后者按順序執(zhí)行
題目3： 解釋IE事件冒泡和DOM2事件傳播機制？
<Document onclick="alert(4)">
<html onclick="alert(3)">
<head></head>
<body onclick="alert(2)">
<div onclick="alert(1)">
</div>
</body>
</html>
單擊按鈕
IE事件冒泡
代碼讀取流程：button->window
讀取代碼開始就執(zhí)行button的點擊事件，依次彈出 1->2->3->4->5
<html>
<body>
<div>
<button id="btn"></button>
</div>
</body>
<script>
document.html.addEventListener("click",function(){
alert(4);
},false)
document.body.addEventListener("click",function(){
alert(3);
},false)
document.div.addEventListener("click",function(){
alert(2);
},false)
document.querySelector("#btn").addEventListener("click",function(){
alert(1);
},false)
</script>
</html>
DOM2事件傳播機制
讀取代碼流程：window->button->window window->button：捕獲階段 button->window：冒泡階段
Dom2事件觸發(fā)默認冒泡階段處理函數(shù),輸出：1->2->3->4
如果把addEventListener的第三個參數(shù)改成true,意思是捕獲階段處理函數(shù)，輸出：4->3->2->1
題目4：如何阻止事件冒泡？ 如何阻止默認事件？
阻止事件冒泡
function stopPorpagation(e){
if(e.stopPorpafation){
//流行瀏覽器
e.stopPropagation();
}else{
//老IE瀏覽器
e.cancleBubble=true;
}
}
阻止默認事件
function preventDefault(e){
if(e.preventDefault){
//流行瀏覽器
e.preventDefault();
}else{
//老IE瀏覽器
e.returnValue=true;
}
}
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<body>
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var Oct=document.querySelector(".ct");
Oct.addEventListener("click",function(e){
console.log(e.target.innerText);
})
</script>
</body>
點擊效果：
題目6： 補全代碼，要求：
<body>
<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 Oct=document.querySelector(".ct");
var Oipt_add_content=document.querySelector(".ipt-add-content")
var Obtn_add_start=document.querySelector("#btn-add-start");
var Obtn_add_end=document.querySelector("#btn-add-end");
Obtn_add_start.addEventListener("click",function(){
var newli=document.createElement("li");
newli.innerText=Oipt_add_content.value;
Oct.insertBefore(newli,Oct.firstChild);
});
Obtn_add_end.addEventListener("click",function(){
var newli=document.createElement("li");
newli.innerText=Oipt_add_content.value;
Oct.appendChild(newli);
});
Oct.addEventListener("click",function(e){
console.log(e.target.innerText);
});
</script>
</body>
題目7： 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片。
<body>
<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 Oct=document.querySelector(".ct");
var Oimg_preview=document.querySelector(".img-preview");
Oct.addEventListener("mouseover",function(e){
var getAb=e.target.getAttribute("data-img");
var Oimg=document.createElement("img");
Oimg.setAttribute("src","img/"+getAb);
Oimg_preview.innerHTML=null;
Oimg_preview.appendChild(Oimg);
})
</script>
</body>
