1. DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0事件監(jiān)聽：Dom0級事件處理程序是將一個函數(shù)賦值給一個事件處理程序?qū)傩裕ㄟ^將事件處理程序設(shè)置為null刪除綁定在元素上的事件處理程序。這種方法無法給一個事件添加多個事件處理程序,后面的程序會覆蓋前面的程序。
<script>
//指定時間處理程序
var btn = document.querySelector("#btn");
btn.onclick = function()
{
alert(this.id)
};
//刪除事件處理程序
btn.onclick= null;
</script>
- DOM2事件監(jiān)聽：而Dom2級定addEventListener()removeEventListener()
用于處理指定和刪除事件處理程序。所有Dom節(jié)點都包含這兩個方法，并且它們都接受3個參數(shù)，要處理的事件名、作為事件處理程序的函數(shù)和一個布爾值。最后這個布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。
<script>
var btn = document.querySelector("#btn");
var handle = function()
{
alert(this.id);
}
//指定事件處理程序
btn.addEventListener("click", handle,false);
//刪除事件處理程序
btn.removeEventListener("click",handle,false);
</script>
注意：removeEventListener()函數(shù)來移除事件處理程序時，移除時的參數(shù)必須與添加處理程序時使用的參數(shù)相同，這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除.（只能用上面的方法寫）如：
<script>
var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
alert(this.id);
}, false);
btnClick.addEventListener('click', function() {
alert('Hello!');
}, false);
//無法移除
btnClick.removeEventListener('click',function(){
},fasle)
</script>
區(qū)別：使用Dom2級方法添加事件處理程序的主要好處是可以添加多個事件處理程序，而Dom0級為一個事件添加多個事件處理程序時，后面的程序會覆蓋前面的。
2. attachEvent與addEventListener的區(qū)別？
在添加事件處理程序時addEventListener和attachEvent（ie）主要有幾個區(qū)別
1. 參數(shù)個數(shù)不相同，這個最直觀，addEventListener有三個參數(shù)，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
2. 第一個參數(shù)意義不同，addEventListener第一個參數(shù)是事件類型（比如click，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
3. 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行，this是window，而不是元素id
4. 為一個事件添加多個事件處理程序時，執(zhí)行順序不同addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器
3. 解釋IE事件冒泡和DOM2事件傳播機制？
1.IE的事件流叫做事件冒泡（event bubbling），即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）
2.Netscape的事件捕獲（event capturing）：不太具體的節(jié)點更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反
3.DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，最先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標(biāo)接收事件，最后是冒泡階段(如圖)
QQ截圖20161227160815.jpg
4. 如何阻止事件冒泡？ 如何阻止默認(rèn)事件？
- 阻止事件冒泡：
<script>
var stopPropagation= function(event){
if(event.stoppropagation()){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}//兼容ie
</script>
- 阻止默認(rèn)事件：
<script>
var preventDefault= function(event){
if(event.preventDefault()){
event.preventDefault();
}else{
event.returnValue= false;
}
}//兼容ie
</script>
代碼練習(xí)
要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容
代碼1補全代碼，要求：當(dāng)點擊按鈕開頭添加時在li這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點擊結(jié)尾添加時在li前端6班/li后添加用戶輸入的非空字符串.當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。
代碼2要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。
代碼3在 github 上創(chuàng)建個人項目，把視頻里事件兼容的函數(shù)寫法放入項目，在 Readme.md里描述項目(選做題目)
<body>
<script type="text/javascript">
function addEvent(node, type, fn) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, fn, false);
return true;
}
else if (node.attachEvent) {
node['e' + type + fn] = fn;
node[type + fn] = function() {
node['e' + type + fn](window.event);
};
node.attachEvent('on' + type, node[type + fn]);
return true;
}
return false;
}
function removeEvent(node, type, fn) {
if (!node) return false;
if (node.removeEventListener) {
node.removeEventListener(type, fn, false);
return true;
}
else if (node.detachEvent) {
node.detachEvent('on' + type, node[type + fn]);
node[type + fn] = null;
}
return false;
}
</script>
</body>
addEvent
如果是支持標(biāo)準(zhǔn)瀏覽器事件addEventListener則使用該函數(shù)添加監(jiān)聽事件，否則是否支持IE的attachEvent事件如果支持則使用該函數(shù)，兩者都不支持則return退出。
removeEvent
如果是支持標(biāo)準(zhǔn)瀏覽器事件removeEventListener則使用該函數(shù)移除監(jiān)聽事件，否則是否支持IE的datachEvent事件如果支持則使用該函數(shù)，兩者都不支持則return退出。
