題目1： DOM0 事件和DOM2級在事件監聽使用方式上有什么區別？

• Dom0級，將特定的元素節點上綁定特定的屬性方法。

var btn =document.getElementById("hh");
btn.onclick=function(){
  console.log("hello world");
}

通過這種方式綁定的事件，是元素的屬性，當再一次給同一個節點元素綁定另外一個屬性方法的時候，前一個屬性的方法將會被覆蓋,也就是只能指定一次,其次此時事件處理程序是在元素的作用域里中運行，所以此時this指向的是元素本身。

• Dom2級別事件監聽的方法

var btn =document.getElementById("hh");
btn.addEventListener('click', function(){
  console.log("hello world");
})

通過這種方式指定的事件處理程序能更靈活，最明顯的區別就是能夠同時綁定多個不同的事件處理程序，并且不相干涉。

題目2： attachEvent與addEventListener的區別？

attachEvent是ie中的類似于標準瀏覽器中的addEventListener監聽方法。由于IE指支持事件冒泡，所以使用attachEvent添加的程序會被添加到冒泡階段，而addEventListener可以設定ture or false 來選擇觸發階段。還有就是當我們使用IE的事件處理程序添加事件時，其處理的先后順序是后添加的先執行，并且當處理程序的作用域是window即this指向的是window.

題目3： 解釋IE事件冒泡和DOM2事件傳播機制？

IE事件的傳播機制只有冒泡階段，即從目標元素向父元素傳播一直傳播到window停止，當傳播的過程中如果監聽到了相同的事件類型酒會一并觸發，即從最具體的元素開始觸發，一直到最外層的元素.
DOM2事件傳播機制包括事件的，從window開始 -> 捕獲階段 －> 到達目標元素 -> 冒泡階段 -> 再到達最外層的 window，并且在addEventListener(type,function(){},true(為捕獲階段)/false(default,為冒泡階段觸發))。

題目4：如何阻止事件冒泡？ 如何阻止默認事件？

• 兼容DOM的瀏覽器會將一個event對象傳入事件處理程序中，這個event對象包含一個stopPropagation()方法，可以組織事件的進一步捕獲或冒泡（取決于添加時的參數）。并且包含一個preventDefault()方法，可以取消事件的默認行為。（在事件處理程序里使用return false也可以）
• 對于IE來說，它的event對象具有cancelBubble屬性，默認值為false，設置為true用來取消事件冒泡； 還有returnValue，默認值為true，設置為false用來取消事件的默認行為。

題目5：有如下代碼，要求當點擊每一個元素li時控制臺展示該元素的文本內容。不考慮兼容

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
var lis=document.querySelector('.ct');
lis.addEventListener('click',function(e){
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>
//你的代碼
</script>

jsbin

題目7： 補全代碼，要求：當鼠標放置在li元素上，會在img-preview里展示當前li元素的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>
//你的代碼
</script>

jsbin