DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別泣港？
DOM0：通過JavaScript指定事件處理程序,即把一個方法賦值給一個元素的事件處理程序屬性。
var btn = document.getElementById('btn');
btn.onclick = function showMessage() {
alert(1);
}
DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
- addEventListener
- removeEventListener
所有的DOM節(jié)點都包含這兩個方法预烙，并且它們都接受三個參數(shù)：
1.事件類型
2.事件處理方法
3.布爾參數(shù)，如果是true表示在捕獲階段調用事件處理程序道媚，如果是false扁掸，則是在事件冒泡階段處理
var btn = document.getElementById('btn');
btn.addEventListener("click",function(){
alert(1);
})
當btn需要調用多個函數(shù)時，DOM0級的容易被后面的函數(shù)覆蓋衰琐，DOM2級事件不會出現(xiàn)這種情況
attachEvent與addEventListener的區(qū)別也糊？
1炼蹦、addEventListener除了IE6羡宙、7不兼容外，其他瀏覽器均可以兼容掐隐； attachEvent就是針對IE6狗热、7的，只有IE6虑省、7能支持attachEvent匿刮；
2、參數(shù)個數(shù)不相同探颈，這個最直觀熟丸，addEventListener有三個參數(shù)，attachEvent只有兩個伪节，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段光羞，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）
3、第一個參數(shù)意義不同怀大，addEventListener第一個參數(shù)是事件類型（比如click纱兑，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick化借，onload）
4潜慎、事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素铐炫，而attachEvent事件處理程序會在全局變量內運行垒手，this是window
解釋IE事件冒泡和DOM2事件傳播機制？
IE的事件冒泡：事件開始時由最具體的元素接收倒信，然后逐級向上傳播到較為不具體的元素
如何阻止事件冒泡？ 如何阻止默認事件瘾带？
阻止事件冒泡：event.stopPropagation().
阻止默認事件：event.preventDefault()鼠哥。
有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容看政。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var oUl = document.getElementsByClassName("ct");
var oLi = oUl[0].getElementsByTagName("li");
for(var i=0;i<oLi.length;i++){
oLi[i].addEventListener("click",function(){
console.log(this.innerText)
})
}
</script>
補全代碼朴恳，要求：當點擊按鈕開頭添加時在< 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 oUl = document.getElementsByClassName("ct")[0];
var oLi = oUl.getElementsByTagName("li");
var addStart = document.getElementById("btn-add-start");
var addEnd = document.getElementById("btn-add-end");
var cont = document.getElementsByClassName("ipt-add-content")[0];
addStart.addEventListener("click",function(){
var reg = /[^\s]/g;
var newElement = document.createElement("li");
newElement.innerText = cont.value.match(reg).join("");
oUl.insertBefore(newElement,oLi[0]);
});
addEnd.addEventListener("click",function(){
var reg = /[^\s]/g;
var newElement = document.createElement("li");
newElement.innerText = cont.value.match(reg).join("");
oUl.appendChild(newElement);
});
</script>
補全代碼，要求：當鼠標放置在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>
<script>
var oUl = document.getElementsByClassName("ct")[0];
var oLi = oUl.getElementsByTagName("li");
var imgBox = document.getElementsByClassName("img-preview")[0];
var oImg = document.createElement("img");
oImg.setAttribute("src","xxx");
imgBox.appendChild(oImg);
for (var i = 0; i < oLi.length; i++) {
oLi[i].addEventListener("mouseover",function(){
oImg.setAttribute("src",this.getAttribute("data-img"));
})
}
</script>
