1.DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0 事件：使用onClick方法直接添加事件
<input id="btn" type="button" value="click here"/> <script type="text/javascript"> var btn=document.getElementById("btn"); //添加事件 btn.onclick=function(){ console.log(this.id); }; //刪除事件 btn.onclick=null; </script>
使用DOM0級方法指定的事件處理程序被認為是元素的方法，此時事件處理程序是在元素的作用域里中運行，所以此時this指向的是元素本身。而且這種添加方式的缺陷是，只能存在一個處理程序，如果再次向同一個元素添加另外一個處理程序，上一個處理程序會被覆蓋。
- DOM2級事件：使用addEventListener和removeEventListener來添加事件和刪除事件。
<input id="btn" type="button" value="click here"/> <script type="text/javascript"> var btn=document.getElementById("btn"); //添加事件 btn.addEventListener("click",function(){ console.log(this); }); //刪除事件 btn.removeEventListener("click",function(){ console.log(this); }); </script>
2.attachEvent與addEventListener的區(qū)別？
addEventListener是DOM2的添加事件方法（也是目前的標準）,attachEvent只是老IE（IE6,7)的方法;
參數(shù)個數(shù)不同，addEventListener有3個參數(shù)(事件類型，處理方法，是否攔截)，而attachEvent只有2個參數(shù)（事件類型，處理方法）;
第一個參數(shù)名稱不一致：addEventListener的事件類型參數(shù)為'click','dblclick'等(type)；而attachEvent的事件類型參數(shù)為'onclick','ondblclick'等(on+type);
事件流不一樣，addEventListener通過設置第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）；而attachEvent的事件處理只能在冒泡階段;
事件處理程序的作用域不相同：addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行，this是window;
為一個事件添加多個事件處理程序時，執(zhí)行順序不同：addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律。
3.解釋IE事件冒泡和DOM2事件傳播機制？
IE事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素；
-
DOM2事件傳播機制：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標接收事件，最后是冒泡階段；
4.如何阻止事件冒泡？ 如何阻止默認事件？
1.對于DOM的事件對象
stopPropagation() // 取消事件進一步捕獲或冒泡
preventDefault() // 取消事件默認行為
2.對于IE
cancelBubble // 默認為false，設置為true后可以取消事件冒泡
returnValue // 默認為true，設為false可以取消事件默認行為
5.有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容（不考慮兼容）。
<ul class="ct"> <li>這里是</li> <li>饑人谷</li> <li>前端6班</li> </ul>
<script> var ct=document.getElementsByClassName("ct")[0]; ct.addEventListener("click",function(e){ if(e.target.tagName.toLowerCase()==="li"){ console.log(e.target.innerText); } }) </script>
6.補全代碼，要求：
- 當點擊按鈕開頭添加時在
<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串. - 當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。
<ul class="ct"> <li>這里是</li> <li>饑人谷</li> <li>任務班</li> </ul> <input class="ipt-add-content" placeholder="添加內(nèi)容"/> <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 start=document.querySelector("#btn-add-start"); var end=document.querySelector("#btn-add-end"); ct.addEventListener("click",function(e){ if(e.target.tagName.toLowerCase()==="li"){ console.log(e.target.innerText); } }); start.addEventListener("click",function(){ var text=ipt.value; if(/^\s*$/.test(text)){ alert("輸入內(nèi)容不能為空！"); }else{ nodeLi=document.createElement("li"); nodeLi.innerText=text; ct.insertBefore(nodeLi,ct.firstChild); } }); end.addEventListener("click",function(){ var text=ipt.value; if(/^\s*$/.test(text)){ alert("輸入內(nèi)容不能為空！"); }else{ nodeLi=document.createElement("li"); nodeLi.innerText=text; ct.appendChild(nodeLi); } }); </script>
7.補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片。
<ul class="ct"> <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標放置查看圖片1</li> <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標放置查看圖片2</li> <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標放置查看圖片3</li> </ul>
<div class="img-preview"></div>
<script> var ct = document.querySelector('.ct'), childs = ct.querySelectorAll('li'), preview = document.querySelector('.img-preview');
for(var i=0; i<childs.length; i++){ childs[i].addEventListener('mouseenter', function(){ var dataImg = this.getAttribute('data-img'); preview.innerHTML = '' }); } </script>
