題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- Dom0級
Dom0級事件處理程序是將一個函數(shù)賦值給一個事件處理程序?qū)傩酝邢恚ㄟ^將事件處理程序設(shè)置為null刪除綁定在元素上的事件處理程序识藤。這種方法無法給一個事件添加多個事件處理程序，后面的程序會覆蓋前面的程序。
// 添加事件處理程序
var btn=document.querySelector("#btn");
btn.onclick=function () {
alert(this.id);
}
// 刪除事件處理程序
btn.onclick=null;
- Dom2級
而Dom2級定義了addEventListener()和removeEventListener()用于處理指定和刪除事件處理程序场斑。所有Dom節(jié)點都包含這兩個方法，并且它們都接受3個參數(shù)牵署，要處理的事件名漏隐、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true奴迅，表示在捕獲階段調(diào)用事件處理程序青责；如果是false挺据，表示在冒泡階段調(diào)用事件處理程序。
var btn=document.querySelector("#btn");
var handler=function(){
alert(this.id);
}
// 指定事件處理程序
btn.addEventListener("click",handler,false);
// 刪除事件處理程序
btn.removeEventListener("click",handler,false);
但是通過removeEventListener()函數(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ū)別构蹬？
addEventListener和attachEvent區(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。為一個事件添加多個事件處理程序時峭跳，執(zhí)行順序不同膘婶，
addEventListener()添加會按照添加順序執(zhí)行，而attachEvent()添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的蛀醉，但是添加的多了就無規(guī)律了)悬襟，所以添加多個的時候，不依賴執(zhí)行順序的還好拯刁，若是依賴于函數(shù)執(zhí)行順序脊岳，最好自己處理，不要指望瀏覽器
題目3： 解釋IE事件冒泡和DOM2事件傳播機制垛玻？
事件流描述的是從頁面中接收事件的順序割捅，比如有兩個嵌套的div，點擊了內(nèi)層的div帚桩，這時候是內(nèi)層的div先觸發(fā)click事件還是外層先觸發(fā)亿驾？目前主要有三種模型
IE的事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
Netscape的事件捕獲：不太具體的節(jié)點更早接收事件账嚎，而最具體的元素最后接收事件莫瞬，和事件冒泡相反
DOM2事件流：DOM2級事件規(guī)定事件流包括三個階段儡蔓，事件捕獲階段，處于目標階段疼邀，事件冒泡階段喂江，首先發(fā)生的是事件捕獲，為截取事件提供機會旁振，然后是實際目標接收事件获询，最后是冒泡階段
題目4：如何阻止事件冒泡？ 如何阻止默認事件拐袜？
- 阻止事件冒泡
W3C的方法是e.stopPropagation()筐付，IE則是使用e.cancelBubble = true -
stopPropagation方法阻止事件在DOM中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)阻肿，但是不包括在當前節(jié)點上新定義的事件監(jiān)聽函數(shù)。
function stopEvent(e) {
e.stopPropagation();
}
el.addEventListener('click', stopEvent, false);
將上面函數(shù)指定為監(jiān)聽函數(shù)沮尿，會阻止事件進一步冒泡到el節(jié)點的父節(jié)點
-
stopImmediatePropagation方法阻止同一個事件的其他監(jiān)聽函數(shù)被調(diào)用丛塌。
如果同一個節(jié)點對于同一個事件指定了多個監(jiān)聽函數(shù)，這些函數(shù)會根據(jù)添加的順序依次調(diào)用畜疾。只要其中有一個監(jiān)聽函數(shù)調(diào)用了
stopImmediatePropagation方法赴邻，其他的監(jiān)聽函數(shù)就不會再執(zhí)行了。
function l1(e){
e.stopImmediatePropagation();
}
function l2(e){
console.log('hello world');
}
el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);
上面代碼在el節(jié)點上啡捶，為click事件添加了兩個監(jiān)聽函數(shù)l1和l2姥敛。由于l1調(diào)用了stopImmediatePropagation方法，所以l2不會被調(diào)用
- 阻止瀏覽器默認行為
W3C的方法是e.preventDefault()瞎暑，IE則是使用e.returnValue = false -
preventDefault方法取消瀏覽器對當前事件的默認行為彤敛，比如點擊鏈接后，瀏覽器跳轉(zhuǎn)到指定頁面了赌，或者按一下空格鍵墨榄，頁面向下滾動一段距離。該方法生效的前提是勿她，事件的cancelable屬性為true袄秩，如果為false，則調(diào)用該方法沒有任何效果逢并。
該方法不會阻止事件的進一步傳播（stopPropagation方法可用于這個目的）之剧。只要在事件的傳播過程中（捕獲階段、目標階段砍聊、冒泡階段皆可）背稼，使用了preventDefault方法，該事件的默認方法就不會執(zhí)行辩恼。
// HTML代碼為
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);
上面代碼為點擊單選框的事件雇庙，設(shè)置監(jiān)聽函數(shù)谓形，取消默認行為。由于瀏覽器的默認行為是選中單選框疆前，所以這段代碼會導致無法選中單選框寒跳。
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容竹椒。不考慮兼容
<Doctype !html>
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
document.querySelector('.ct').addEventListener('click',function(e){
if (e.target.tagName.toLowerCase()==='li') console.log(e.target.innerText);
})
</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 ph = document.querySelector('.ipt-add-content'),
ct = document.querySelector('.ct'),
lastClickTarget = document.createElement('li'),
lastHoverTarget = document.createElement('li'),
saveColor = 'white';
document.querySelector('#btn-add-start').addEventListener('click',function(){
var newElement = document.createElement('li');
newElement.innerText = ph.value;
if (ph.value) ct.insertBefore(newElement,ct.firstElementChild);
})
document.querySelector('#btn-add-end').addEventListener('click',function(){
var newElement = document.createElement('li');
newElement.innerText = ph.value;
if (ph.value) ct.appendChild(newElement);
})
ct.addEventListener('click',function(e){
if (e.target.nodeName.toLowerCase() === 'li') {
console.log(e.target.innerText);
lastClickTarget.style.background = 'white';
e.target.style.background = 'yellow';
lastClickTarget = e.target;
saveColor = e.target.style.background;
}
})
ct.addEventListener('mouseover',function(e){
var nowColer = e.target.style.background;
if (e.target.nodeName.toLowerCase() === 'li') {
lastHoverTarget.style.background = saveColor;
saveColor = e.target.style.background;
e.target.style.background = 'orange';
lastHoverTarget = e.target;
}
})
</script>
題目7： 補全代碼，要求：當鼠標放置在li元素上赊窥，會在img-preview里展示當前l(fā)i元素的data-img對應(yīng)的圖片爆惧。
<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>
<style>
.img-preview{
height: 200px;
width: 300px;
background-size: cover;
}
</style>
<script>
var ct = document.querySelector('.ct'),
img = document.querySelector('.img-preview');
ct.addEventListener('mouseover',function(e){
if (e.target.nodeName.toLowerCase() ==='li')
img.style.backgroundImage = 'url(http://osafeurnt.bkt.clouddn.com/interests-'+e.target.getAttribute('data-img')[0]+'.jpg';
})
ct.addEventListener('mouseleave',function(e){
img.style.backgroundImage = '';
})
</script>
