1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0級事件監(jiān)聽就是把一個方法賦值給一個元素的事件處理程序?qū)傩浴⑦@些屬性的值設(shè)置為一個函數(shù)，就可以指定事件處理程序穿剖。一個事件只能綁定一次，并且新方法會覆蓋老方法卦溢。例如
btn.onclick=function(){} - DOM2級事件監(jiān)聽定義了兩個方法用于處理指定和刪除事件處理程序的操作：addEventListener糊余、removeEventListener。所有的DOM節(jié)點都包含這兩個方法单寂，并且它們都接受三個參數(shù)：事件類型贬芥、事件處理方法、布爾參數(shù)宣决。例如
addEventListener蘸劈、removeEventListener∽鸱校可以選擇按照冒泡的順序處理還是捕獲的順序處理威沫。
2： attachEvent與addEventListener的區(qū)別？
- 參數(shù)個數(shù)不相同洼专，addEventListener有三個參數(shù)棒掠，attachEvent只有兩個,attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 第一個參數(shù)意義不同屁商，addEventListener第一個參數(shù)是事件類型（比如click烟很，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
- 事件處理程序的作用域不相同雾袱，addEventListener的作用域是元素本身恤筛，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行谜酒，this是window，所以會返回undefined妻枕，而不是元素id僻族。
- 為一個事件添加多個事件處理程序時，執(zhí)行的順序不同屡谐。 addEventListener 會按照添加的順序執(zhí)行述么。 attachEvent 添加多個事件處理程序時，順序是無規(guī)律的
3： 解釋IE事件冒泡和DOM2事件傳播機制愕掏？
IE的事件冒泡：事件開始時由最具體的元素接收度秘，然后逐級向上傳播到較為不具體的元素
事件冒泡模型
DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段饵撑，處于目標(biāo)階段剑梳，事件冒泡階段，首先發(fā)生的是事件捕獲滑潘，為截取事件提供機會垢乙，然后是實際目標(biāo)接收事件，最后是冒泡階段
DOM2事件傳播機制
4：如何阻止事件冒泡语卤？ 如何阻止默認(rèn)事件追逮？
DOM瀏覽器
阻止冒泡e.stopPropagation()
阻止默認(rèn)事件event.preventDefault()
IE瀏覽器
阻止冒泡e.cancelBubble = true;
阻止默認(rèn)事件event.returnValue = false;
5：有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容粹舵。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>英雄聯(lián)盟</li>
<li>敵軍三十秒后到達戰(zhàn)場</li>
</ul>
<script>
//todo ...
</script>
<script>
var lists=$(".ct");
lists.addEventListener("click",function(e){
console.log(e.target.innerText);
});
function $(id){
return document.querySelector(id);
}
</script>
6： 補全代碼钮孵，要求：
- 當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串眼滤；當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
- 當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容巴席。
<ul class="ct">
<li>這里是</li>
<li>英雄聯(lián)盟</li>
<li>全軍出擊</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//你的代碼
</script>
7： 補全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上诅需，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(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>
//你的代碼
</script>
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
function $(id){
return document.querySelector(id);
}
var lists=$(".ct");
var show=$(".img-preview");
var img=document.createElement("img");
show.appendChild(img);
lists.addEventListener("mouseover",function(e){
var dataImg=e.target.getAttribute("data-img");
img.setAttribute("src",dataImg);
});
</script>
