1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別鞍帝？
- DOM0級事件處理程序：
通過JavaScript指定事件處理程序，將一個函數(shù)賦值給一個元素的事件處理程序?qū)傩浴?/li>
每個元素都有自己的事件處理程序?qū)傩陨访＃@些屬性名稱通常為小寫帕涌，如onclick等，將這些屬性的值設(shè)置為一個函數(shù)续徽，就可以指定事件處理程序蚓曼，如下：
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.onclick = function showMessage() {
alert(this.id);
};
</script>
DOM0級方法指定的事件處理程序被認(rèn)為是元素的方法，事件處理程序在元素的作用域下運行钦扭，this指向當(dāng)前元素纫版，在事件處理程序中可通過this訪問元素的任何屬性和方法，以這種方式添加的事件處理程序會在事件流的冒泡階段被處理客情。
可將事件處理程序?qū)傩再x值為null來刪除通過DOM0級方法指定的事件處理程序其弊。
btn.onclick = null; //刪除事件處理程序
- DOM2級事件處理程序：
DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
addEventListener()
removeEventListener()
所有的DOM節(jié)點都包含這兩個方法，并且它們都接受3個參數(shù)：事件名
膀斋、事件處理函數(shù)梭伐、布爾值，布爾值如果是true表示在捕獲階段調(diào)用事件處理程序仰担，false則是在事件冒泡階段處理糊识。
上面的例子可以這樣寫：
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
</script>
上面的事件會在冒泡階段被觸發(fā)，這里添加的事件處理程序也是在其依附的元素的作用域中運行摔蓝，使用DOM2級方法添加事件處理程序的好處是可以添加多個事件處理程序：
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
btnClick.addEventListener('click', function() {
alert('Hello!');
}, false);
</script>
這兩個事件處理程序會按照添加它們的順序觸發(fā)赂苗。
通過addEventListener()添加的事件處理程序只能通過removeEventListener()移除，移除時參數(shù)與添加的時候相同贮尉，這就意味著剛才我們添加的匿名函數(shù)無法移除哑梳，因為匿名函數(shù)雖然方法體一樣，但是句柄卻不相同绘盟，所以正確的做法是將作為參數(shù)的的函數(shù)賦值給一個變量鸠真，這樣添加和刪除事件處理程序時大家引用的就是同一個函數(shù)了。
<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
var btnClick = document.getElementById('btnClick');
var handler=function() {
alert(this.id);
}
btnClick.addEventListener('click', handler, false);
btnClick.removeEventListener('click', handler, false);
</script>
將事件處理程序添加到事件流的冒泡階段可以最大限度地兼容各種瀏覽器龄毡。IE9吠卷、Firefox、Chrome沦零、Safari祭隔、Opera都支持DOM2級事件處理程序。
- 區(qū)別：
- DOM0級同一個事件處理程序只能對應(yīng)一個處理函數(shù)，定義多次則新方法會覆蓋老方法疾渴。DOM2級可同時添加多個事件處理程序且會按添加他們的順序先后執(zhí)行千贯。
- DOM0級簡單且具有跨瀏覽器優(yōu)勢，DOM2級不具備跨瀏覽器優(yōu)勢搞坝。
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ī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的捌朴，但是添加的多了就無規(guī)律了)吴攒，所以添加多個的時候，不依賴執(zhí)行順序的還好砂蔽，若是依賴于函數(shù)執(zhí)行順序洼怔，最好自己處理，不要指望瀏覽器
3： 解釋IE事件冒泡和DOM2事件傳播機制左驾？
-
IE的事件流叫做事件冒泡（event bubbling）镣隶，即事件開始時由最具體的元素（文檔中嵌套層次最深的那個節(jié)點）接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）诡右。
示例:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
當(dāng)點擊div區(qū)域安岂，click事件首先在元素上發(fā)生，而這個元素就是我們單擊的元素帆吻。然后click事件沿DOM樹向上傳播域那，在每一級節(jié)點上都會發(fā)生直至傳播到document對象。
所有現(xiàn)代瀏覽器都支持事件冒泡猜煮，但I(xiàn)E5.5及更早版本中的事件冒泡會跳過<html>元素次员，從<body>直接到document败许，IE9、Firefox淑蔚、Chrome市殷、Safari則將事件一直冒泡到window對象。
- DOM2級事件傳播機制規(guī)定的事件流包括三個階段：事件捕獲階段束倍、處于目標(biāo)階段和事件冒泡階段被丧。首先發(fā)生的是事件捕獲，為截獲事件提供了機會绪妹。然后是實際的目標(biāo)接收到事件甥桂。最后一個階段是冒泡階段，可以在這個階段對事件做出響應(yīng)邮旷。以前面簡單的HTML頁面為例黄选，單擊<div>元素會按照下圖所示順序觸發(fā)事件。
以上面代碼為例婶肩，捕獲階段事件從ducument到<html>再到<body>后就停止了办陷，下一階段是“處于目標(biāo)”階段，事件在<div>上發(fā)生并在事件處理中被視為冒泡階段的一部分律歼，接著冒泡階段發(fā)生民镜，事件又傳播回文檔。
IE9险毁、Opera制圈、Firefox、Chrome畔况、Safari都支持DOM事件流鲸鹦，IE8及更早版本不支持事件流，只支持事件冒泡跷跪。
即使DOM2級事件規(guī)范明確要求捕獲階段不會涉及事件目標(biāo)馋嗜，但I(xiàn)E9,Firefox,Chrome,Safari和Opera9.5及更高版本都會在事件捕獲階段觸發(fā)事件對象上的事件，結(jié)果就是有兩個機會在目標(biāo)對象上操作事件吵瞻。
4：如何阻止事件冒泡葛菇？ 如何阻止默認(rèn)事件？
- 阻止事件冒泡使用
event.stopPropagation()
方法阻止事件在DOM中繼續(xù)傳播橡羞，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)熟呛，但是不包括在當(dāng)前節(jié)點上新定義的事件監(jiān)聽函數(shù) - 阻止默認(rèn)事件使用
event.preventDefault()
方法不會阻止事件的進一步傳播,只要在事件的傳播過程中（捕獲階段、目標(biāo)階段尉姨、冒泡階段皆可）庵朝，使用了preventDefault方法，該事件的默認(rèn)方法就不會執(zhí)行
5：有如下代碼，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容九府。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelector(".ct")
ct.addEventListener('click',function(e){
var target = e.target
if(target.tagName.toLowerCase()==='li'){
console.log(target.innerText)
}
})
</script>
6： 補全代碼椎瘟，要求：
當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串侄旬；當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容肺蔚。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<input id="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
var ct = document.querySelector('.ct')
var ipt = document.querySelector('#ipt-add-content')
var startBtn = document.querySelector('#btn-add-start')
var endBtn = document.querySelector('#btn-add-end')
ct.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 = ipt.value;
if(newLi.innerText.match(/\S/))
ct.insertBefore(newLi,ct.firstChild);
})
endBtn.addEventListener('click',function(){
var newLi = document.createElement('li')
newLi.innerText = ipt.value;
if(newLi.innerText.match(/\S/))
ct.appendChild(newLi);
})
</script>
7： 補全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上儡羔，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片宣羊。
<body>
<ul class="ct">
<li data-img="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2060237827,3671274443&fm=11&gp=0.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3046951468,909997987&fm=27&gp=0.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2672761046,1103793992&fm=27&gp=0.jpg">鼠標(biāo)放置查看圖片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){
if(e.target.tagName.toLowerCase() === 'li')
var imgSrc = e.target.getAttribute('data-img')
var img = document.createElement('img')
img.setAttribute('src',imgSrc)
imgPre.appendChild(img)
})
ct.addEventListener('mouseout',function(e){
imgPre.innerHTML = ''
})
</script>
</body>
