題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別唇辨？
- DOM0級事件處理程序是將一個函數(shù)賦值給一個事件處理程序?qū)傩陨ò常ㄟ^將事件處理程序?qū)傩灾翟O(shè)置為null來刪除
DOM0級方法指定的事件處理程序，優(yōu)勢在于簡單湃交，二是具有跨瀏覽器的優(yōu)勢奸披；劣勢在于一個事件添加多個事件處理程序习绢，后面的程序或覆蓋前面的程序
//添加事件處理程序
var btn = document.querySelector('#btn')
btn.onclick = function(){
alert(this.id)
}
//刪除事件處理程序
btn.onclick = null
- DOM2級事件定義了兩個方法污茵，用于處理指定和刪除事件處理程序的操作：
addEventListener()和removeEventListener()樱报。所有DOM節(jié)點中都包括這兩個方法，并且它們都接受3個參數(shù);要處理的事件省咨、事件處理程序的函數(shù)和一個布爾值肃弟。布爾值true玷室，表示在捕獲階段調(diào)用事件處理程序零蓉；false表示冒泡階段調(diào)用事件處理程序笤受。默認是false
var btn = document.querySelector('#btn')
var handler = function(){
alert(this.id)
}
//指定事件處理程序
btn.addEventListener("click",hander,false)
//刪除事件處理程序
btn.removeEventListener("click",hander,false)
通過removeEventListenrer()函數(shù)來移除事件處理程序時，移除的參數(shù)必須與添加處理程序時使用的參數(shù)相同敌蜂，這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除
var btn = document.querySelector('#btn')
//指定事件處理程序
btn.addEventListener("click",function(){
alert(this.id)
},false)
//刪除事件處理程序箩兽，不會生效
btn.removeEventListener("click",function(){
alert(this.id)
},false)
區(qū)別：使用DOM2級方法添加事件處理程序主要喊出可以添加多個事件處理程序，DOM0級方法添加多個事件處理程序時章喉，后面的程序會覆蓋前面的程序
題目2： attachEvent與addEventListener的區(qū)別汗贫？
- 使用attachEvent()為按鈕添加一個事件處理程序，可以使用以下代碼
var btn = document.querySelector('#btn')
btn.attachEvent("onclick",function(){
console.log(this);
})
- 使用addEventListener()為按鈕添加一個事件處理程序秸脱，可以使用以下代碼
var btn = document.querySelector('#btn')
btn.addEventListener("click",function(){
console.log(this);
},false)
- 1.參數(shù)個數(shù)不同落包，這個最直觀，addEventListener有三個參數(shù)摊唇，attachEvent只有兩個咐蝇，attachEvent添加事件處理程序只能在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 2.第一個參數(shù)意義不同addEventListener第一個參數(shù)是事件類型（比如click巷查，load）有序，而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
3.事件處理程序的作用域不同addEventListener的作用域是元素本身岛请，this是指的觸發(fā)元素旭寿，而attachEvent事件處理程序會在全局變量內(nèi)運行，this是window崇败，所以剛才例子才會返回undefined盅称，而不是元素id
- 為一個事件添加多個事件處理程序時，執(zhí)行順序不同addEventListener()添加會按照添加順序執(zhí)行僚匆，而attachEvent()添加多個事件處理程序時順序無規(guī)律（添加的方法少的時候大多是按照添加順序的反順序執(zhí)行的微渠，但是添加的多了就無規(guī)律了），所以添加多個的時候咧擂，不依賴執(zhí)行順序的還好逞盆，若是依賴于函數(shù)執(zhí)行順序，最好自己處理松申，不要指望瀏覽器
題目3： 解釋IE事件冒泡和DOM2事件傳播機制云芦？
- IE的事件流叫事件冒泡，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收贸桶，然后逐級向上傳播到較為不具體的節(jié)點（文檔）
-
所有現(xiàn)代瀏覽器都支持事件冒泡舅逸，但IE5.5及更早版本中的事件冒泡會跳過<html>元素，從<body>直接到document皇筛，IE9琉历、Firefox、Chrome、Safari則將事件一直冒泡到window對象旗笔。
事件冒泡
- DOM2級事件傳播機制規(guī)定的事件流包括三個階段：事件捕獲階段彪置、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲蝇恶，為截獲事件提供了機會拳魁。然后是實際的目標接收到事件。最后一個階段是冒泡階段撮弧，可以在這個階段對事件做出響應(yīng)潘懊。以前面簡單的HTML頁面為例，單擊<div>元素會按照下圖所示順序觸發(fā)事件贿衍。
DOM2級事件
題目4：如何阻止事件冒泡授舟？ 如何阻止默認事件？
- 阻止事件冒泡
event.stopPropagation()
方法阻止事件在DOM中繼續(xù)傳播防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)贸辈，但是不包括在當前節(jié)點上新定義的事件監(jiān)聽函數(shù) - 阻止默認事件
event.preventDefault()
方法不會阻止事件的進一步傳播,只要在事件的傳播過程中（捕獲階段岂却、目標階段、冒泡階段皆可）裙椭，使用了preventDefault方法躏哩，該事件的默認方法就不會執(zhí)行
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容揉燃。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
var ct = document.querySelector('.ct')
var handler = function(e){
var target = e.target
if(target.tagName.toLowerCase() === 'li'){
console.log(target.innerText)
}
}
ct.addEventListener('click',handler,false);
</script>
題目6： 補全代碼扫尺，要求：
當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串炊汤；當點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容正驻。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//你的代碼
var startBtn = document.querySelector('#btn-add-start')
var endBtn = document.querySelector('#btn-add-end')
var ipt = document.querySelector('.ipt-add-content')
var ct = document.querySelector('.ct')
ct.addEventListener('click',function(e){
var target = e.target
if(target.tagName.toLowerCase() === 'li'){
console.log(target.innerText)
}
},false)
startBtn.addEventListener('click',function(){
var newLi = document.createElement('li')
newLi.innerText = ipt.value
if(newLi.innerText !== ''){
ct.insertBefore(newLi,ct.firstChild)
}else{
alert('內(nèi)容不能為空')
}
},false)
endBtn.addEventListener('click',function(){
var newLi = document.createElement('li')
newLi.innerText = ipt.value
if(newLi.innerText !== ''){
ct.appendChild(newLi)
}else{
alert('內(nèi)容不能為空')
}
},false)
</script>
題目7： 補全代碼，要求：當鼠標放置在li元素上抢腐，會在img-preview里展示當前l(fā)i元素的data-img對應(yīng)的圖片姑曙。
<ul class="ct">
<li data-img="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/1.jpg">鼠標放置查看圖片1</li>
<li data-img="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/2.jpg">鼠標放置查看圖片2</li>
<li data-img="http://book.jirengu.com/jirengu-inc/jrg-tehui/homework/%E8%8B%A5%E6%84%9A/16/img/about/3.jpg">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代碼
var ct = document.querySelector('.ct')
var imgPre = document.querySelector('.img-preview')
ct.addEventListener('mouseover',function(e){
var target = e.target
if(target.tagName.toLowerCase() === 'li'){
var img = document.createElement('img')
var imgSrc = target.getAttribute('data-img')
img.setAttribute('src',imgSrc)
imgPre.appendChild(img)
}
},false)
ct.addEventListener('mouseout',function(e){
imgPre.innerHTML = ''
},false)
</script>
