題目1： DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？

• DOM0事件為將一個事件的方法賦值為一個函數(shù)，比如btn.onclick = function(){};這種是將btn的點擊事件賦值為一個函數(shù)。這種方法只能綁定一個函數(shù)，如果后面再對此方法賦值的話會造成后面賦值的函數(shù)會覆蓋前面賦值的函數(shù)。
• DOM2級事件定義了兩個方法用于處理指定和刪除事件處理程序的操作：
  1、addEventListener
  2、removeEventListener
  所有的DOM節(jié)點都包含這兩個方法，并且它們都接受三個參數(shù)：
  1.事件類型
  2.事件處理方法
  3.布爾參數(shù)，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理
  DOM2級事件賦值的方法不會覆蓋之前賦值的方法。

題目2： attachEvent與addEventListener的區(qū)別？

• IE并不支持addEventListener和removeEventListener方法，而是實現(xiàn)了兩個類似的方法
  1、attachEvent
  2，detachEvent
  這兩個方法都接收兩個相同的參數(shù)
  1、事件處理程序名稱
  2、事件處理程序方法
• 由于IE只支持事件冒泡，所以添加的程序只能選擇事件冒泡階段處理，不能像addEventListener選擇在冒泡階段或者捕獲階段處理，因此少了第三個參數(shù)。
• 而且addEventListener的第一個參數(shù)的事件類型，attachEvent的都一個參數(shù)代表事件處理程序名稱。
• addEventListener的作用域是它作用的元素本身，this是指的觸發(fā)元素，而attachEvent的作用域是全局作用域，this是window。
• 為一個事件添加多個事件處理程序時，執(zhí)行順序不同，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)，所以添加多個的時候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器

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

• 事件流描述的是從頁面中接收事件的順序，目前主要有三種模型：
  1、事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素，IE的事件冒泡也是這樣。
  2、事件捕獲：不太具體的節(jié)點更早接收事件，而最具體的元素最后接收事件，和事件冒泡相反
  3、DOM事件流：DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機會，然后是實際目標(biāo)接收事件，最后是冒泡階段

題目4：如何阻止事件冒泡？ 如何阻止默認(rèn)事件？

• 阻止事件冒泡：
  1、標(biāo)準(zhǔn)時間模型中使用stopPropagation()；
  2,、在IE事件模型中將cancelBubble設(shè)置為true,默認(rèn)值為false;
• 阻止默認(rèn)事件:
  1、標(biāo)準(zhǔn)事件模型中使用preventDefault()；
  2,、在IE事件模型中將returnValue設(shè)置為false,默認(rèn)值為true;

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

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
     var exhLi = document.querySelectorAll(".ct li")
     for(var i=0;i<exhLi.length;i++){
       exhLi[i].addEventListener('click',function(){
         console.log(this.innerText)
       })
     }
</script>

題目6： 補全代碼，要求：

當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
    var exhCt = document.querySelector(".ct"),
        addContent = document.querySelector(".ipt-add-content"),
        addStart = document.querySelector("#btn-add-start"),
        addEnd = document.querySelector("#btn-add-end");
        addStart.addEventListener("click",function(){
            if(addContent.value){
                var newli = document.createElement('LI'),
                    newliContent = document.createTextNode(addContent.value);
                newli.appendChild(newliContent)
                exhCt.insertBefore(newli,exhCt.firstChild)
            }else{
                alert("請輸入內(nèi)容")
            }
        })
        addEnd.addEventListener("click",function(){
            if(addContent.value){
                var newli = document.createElement('LI'),
                    newliContent = document.createTextNode(addContent.value);
                newli.appendChild(newliContent);
                exhCt.appendChild(newli);
            }else{
                alert("請輸入內(nèi)容")
            }
        })
</script>

題目7： 補全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。

<ul class="ct">
    <li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506634835121&di=d6a0527ecd212e54c65140a03b9c777b&imgtype=0&src=http%3A%2F%2Fwww.people.com.cn%2Fmediafile%2Fpic%2F20141114%2F68%2F13722014631559806976.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506634857398&di=821a399d8511b9a8fcac839372e5b999&imgtype=0&src=http%3A%2F%2Fpic2.duowan.com%2Fwow%2F1001%2F128450260452%2F128453038627.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506634891147&di=60c0c74029d33815f6fc5f31f6e49cdf&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201204%2F24%2F224551ggtclcphxt2g2slk.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var ct = document.querySelector(".ct"),
        ctimg = document.querySelectorAll(".ct li"),
        imgPre = document.querySelector(".img-preview");
        for(i=0;i<ctimg.length;i++){
            ctimg[i].addEventListener("mouseenter",function(){
                newimg = document.createElement("img");
                dataimg = this.getAttribute('data-img');
                newimg.setAttribute('src',dataimg);
                imgPre.appendChild(newimg);
            })
            ctimg[i].addEventListener("mouseleave",function(){
                imgPre.removeChild(imgPre.firstChild);
            })
        }
</script>