1.DOM0事件和DOM2級在事件監(jiān)聽使用方法上有什么區(qū)別？
(1)添加事件：DOM0使用HTML內聯方式<button onclick="console.log()">點我</button>和通過JS指定事件處理程序btnClick.onClick = function(){}；DOM2使用addEventListener添加監(jiān)聽事件，三個參數：①事件類型②事件處理函數③布爾參數，true表示在捕獲階段處理；false在冒泡階段處理。btnClick.addEventListener('click',function(){},false);
(2)刪除事件：DOM0事件只需要把元素的onclick屬性賦值為nullbtnClick.onclick=null；DOM2使用removeEventListener刪除監(jiān)聽事件btnClick.removeEventListener('click',function(){},false);，不能刪除匿名函數。
(3)DOM0只能在冒泡階段調用事件處理程序，DOM2既可以在捕獲階段，也可以在冒泡階段調用事件處理程序。
(4)多個事件處理程序：DOM0不能添加多個處理程序，會出現后面覆蓋前面的情況；DOM2可以添加多個處理程序。
2.attactEvent和addEventListener的區(qū)別？
(1)參數個數不同：attactEvent有兩個參數，addEventListener有三個參數。attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）
(2)第一個參數意義不同：attactEvent的第一個參數指明的是事件處理函數名稱(onclick,onload)；addEventListener的第一個參數是事件類型(click,load)。
(3)作用域不相同：attactEvent事件處理程序在全局變量內運行，this是window；addEventListener的作用域是元素本身，this指觸發(fā)元素。
(4)執(zhí)行順序不同：attactEvent添加多個事件處理程序順序無規(guī)則；addEventListener會按照添加順序執(zhí)行。
function addEvent(node,type,handler){
if(!node) return false;
if(node.addEventListener){
node.addEventListener(node,handler,false);
return true;
}else if(node.attactEvent){
node['e'+type+handler] = handler;
node[type+handler] = function(){
node['e'+type+handler](window.event);
};
node.attactEvent('no'+type,node[type+handler]);
return true;
}
return false;
}
3.解釋IE事件冒泡DOM2事件傳播機制？
IE事件冒泡：事件開始由最具體的元素接收，然后逐級向上傳播到較為不具體的元素。
DOM2事件傳播機制：DOM2級規(guī)定事件流包括三個階段，事件捕獲階段、處于目標階段，事件冒泡階段，首先發(fā)生的是在事件捕獲，為截取事件提供機會，然后是實現目標接受事件，最后是冒泡階段
4.如何阻止事件冒泡？如何阻止默認事件？
DOM事件對象：
阻止事件冒泡 e.stopPropagation()
阻止默認事件 e.preventDefault()
IE事件對象：
阻止事件冒泡：e.cancelBubble = false
阻止默認事件：e.returnValue = true
5.有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端任務班</li>
</ul>
<script>
//使用事件代理，把事件監(jiān)聽綁定到父容器上，根據事件的來源進行處理
//var ct = document.querySelector('.ct');
//ct.addEventListener("click",function(e){
// console.log(e.target.innerText);
//})
//直接給元素綁定事件
var liNodes = document.getElementsByClassName('ct')[0].getElementsByTagName('li');
for(var i=0;i<liNodes.length;i++){
liNodes[i].addEventListener("click",function(){
console.log(this.innerText);
});
}
</script>
6.補全代碼，要求：
(1)當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內容為用戶輸入的非空字符串；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
(2)當點擊每一個元素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 ct = document.querySelector('.ct');
var ipt = document.querySelector('.ipt-add-content');
var btnStart = document.querySelector('#btn-add-start');
var btnEnd = document.querySelector('#btn-add-end');
btnStart.addEventListener('click',function(){
if(/^\S+$/.test(ipt.value)){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.insertBefore(li,ct.firstChild);
}
});
btnEnd.addEventListener('click',function(){
if(/^\S+$/.test(ipt.value)){
var li = document.createElement('li');
li.innerText = ipt.value;
ct.appendChild(li);
}
});
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase ==='li'){
console.log(e.target.innerText);
}
});
</script>
7.補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片。
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">鼠標放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">鼠標放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct');
var liNodes = ct.querySelectorAll('li');
var preview = document.querySelector('.img-preview');
for(var i = 0;i<liNodes.length; i++){
liNodes[i].addEventListener('mouseenter',function(){
var dataImg = this.getAttribute('data-img');
preview.innerHTML = '';
});
}
//使用事件代理
var ct = document.querySelector('.ct');
var preview = document.querySelector('.img-preview');
var img = document.createElement('img');
ct.addEventListener('mouseover', function(e){
if(e.target.tagName.toLowerCase() ==='li'){
var dataImg = e.target.getAttribute('data-img');
img.setAttribute('src',dataImg);
preview.appendChild(img);
}
});
</script>
