題目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ù)不同西篓。addEventListener有三個參數(shù)，attachEvent只有兩個憋活，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段岂津，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 事件名不同。attachEvent第一個參數(shù)事件名前要加on悦即，比如el.attachEvent('onclick', handleClick);
- 第一個參數(shù)意義不同吮成，addEventListener第一個參數(shù)是事件類型（比如click，load）辜梳，而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick粱甫，onload）
- 事件處理程序的作用域不相同，addEventListener的作用域是元素本身作瞄，this是指的觸發(fā)元素茶宵，而attachEvent事件處理程序會在全局變量內(nèi)運(yùn)行，this是window宗挥，所以會返回undefined乌庶，而不是元素id。
- 為一個事件添加多個事件處理程序時契耿，執(zhí)行的順序不同瞒大。 addEventListener 會按照添加的順序執(zhí)行。 attachEvent 添加多個事件處理程序時搪桂，順序是無規(guī)律的透敌。
題目3： 解釋IE事件冒泡和DOM2事件傳播機(jī)制？
- IE事件冒泡：事件由目標(biāo)元素接收，然后逐級向上傳播到到最不具體的元素
- DOM2事件傳播：總共可以分為三個階段：事件捕獲階段酗电、目標(biāo)階段和事件冒泡階段淌山；首先發(fā)生的是事件捕獲，為截獲事件提供機(jī)會顾瞻，然后是實際目標(biāo)接收事件泼疑，最后是事件冒泡階段
題目4：如何阻止事件冒泡？ 如何阻止默認(rèn)事件荷荤？
- 如果使用的是addEventListener添加的事件退渗，通過調(diào)用event對象的stopPropagation();來阻止冒泡，通過preventDefault()阻止默認(rèn)事件
- 如果使用的是attachEvent添加的事件蕴纳，通過cancelBubble阻止冒泡会油，通過returnValue取消默認(rèn)事件
題目5：有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容古毛。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
let ct =document.querySelector('.ct')
ct.addEventListener('click',function(e){
console.log(e.target.innerHTML)
})
</script>
題目6： 補(bǔ)全代碼翻翩，要求：
當(dāng)點擊按鈕開頭添加時在li元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串稻薇；當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容嫂冻。
http://js.jirengu.com/devowayaqu/1/edit?html,console,output
題目7： 補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上塞椎，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片桨仿。
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="task22-3" />
<meta charset="utf-8">
<title>JS Bin</title>
<style>
</style>
</head>
<body>
<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>
var ct = document.querySelector('.ct')
var preview = document.querySelector('.img-preview')
ct.addEventListener('mouseover',function(e){
var image = document.createElement('img')
image.src = e.target.dataset.img
preview.appendChild(image)
})
ct.addEventListener('mouseout',function(e){
preview.innerHTML = ''
})
//也可以考慮不使用循環(huán)，用事件代理把事件綁定到父元素上案狠，想想怎么實現(xiàn)
</script>
</body>
</html>
