題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- Dom0級
Dom0級事件處理程序是將一個函數(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，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
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ù)意義不同，
addEventListener()第一個參數(shù)是事件類型（比如click，load），而attachEvent()第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）事件處理程序的作用域不相同，
addEventListener()的作用域是元素本身，this是指的觸發(fā)元素，attachEvent()事件處理程序會在全局變量內運行，this是window。為一個事件添加多個事件處理程序時，執(zhí)行順序不同，
addEventListener()添加會按照添加順序執(zhí)行，而attachEvent()添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
題目3： 解釋IE事件冒泡和DOM2事件傳播機制？
事件流描述的是從頁面中接收事件的順序，比如有兩個嵌套的div，點擊了內層的div，這時候是內層的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ù)被調用。
如果同一個節(jié)點對于同一個事件指定了多個監(jiān)聽函數(shù)，這些函數(shù)會根據添加的順序依次調用。只要其中有一個監(jiān)聽函數(shù)調用了
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調用了stopImmediatePropagation方法，所以l2不會被調用
- 阻止瀏覽器默認行為
W3C的方法是e.preventDefault()，IE則是使用e.returnValue = false -
preventDefault方法取消瀏覽器對當前事件的默認行為，比如點擊鏈接后，瀏覽器跳轉到指定頁面，或者按一下空格鍵，頁面向下滾動一段距離。該方法生效的前提是，事件的cancelable屬性為true，如果為false，則調用該方法沒有任何效果。
該方法不會阻止事件的進一步傳播（stopPropagation方法可用于這個目的）。只要在事件的傳播過程中（捕獲階段、目標階段、冒泡階段皆可），使用了preventDefault方法，該事件的默認方法就不會執(zhí)行。
// HTML代碼為
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);
上面代碼為點擊單選框的事件，設置監(jiān)聽函數(shù)，取消默認行為。由于瀏覽器的默認行為是選中單選框，所以這段代碼會導致無法選中單選框。
題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<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>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串. - 當點擊每一個元素li時控制臺展示該元素的文本內容。
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結尾添加</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對應的圖片。
<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>
