題目1：

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

• DOM0級事件處理方式：
  通過JavaScript制定事件處理程序的傳統(tǒng)方式。就是將一個函數(shù)賦值給一個事件處理屬性公罕，第四代web瀏覽器出現(xiàn)，至今為所有瀏覽器所支持楼眷。

    var btn = document.getElementById("btn");

    btn.onclick = function(){
      console.log("I am clicked");
    }  // 設置事件

    btn.onclick = null;  // 刪除事件

優(yōu)點： 簡單，兼容性好罐柳。
缺點： 一個事件處理程序只能對應一個處理函數(shù)掌腰，設置第二個事件時候张吉，因為是賦值辅斟，所以第二個事件會覆蓋第一個事件芦拿。

• DOM2級事件處理方式
  DOM2級事件處理方式指定了，添加事件處理程序和刪除事件處理程序的方法

    addEventListener(eventName,func,isPuhuo);     //添加事件
    removeEventListener(eventName,func,isPuhuo);  //刪除事件
/*參數(shù)分別是蔗崎，事件處理屬性名稱酵幕，處理函數(shù)缓苛，是否在捕獲時執(zhí)行事件處理函數(shù)邓深，
默認是false，即在冒泡階段執(zhí)行
*/

應用舉例

    var btn = document.getElementById("btn");
    var cancel = document.getElementById("cancel")
    function fn(){
      console.log("I am clicked 123");
    }
    btn.addEventListener("click",fn)  //點擊btn事件芥备，執(zhí)行函數(shù)fn
    cancel.addEventListener("click",function(){
      btn.removeEventListener("click",fn)
    })  //點擊cancel事件，執(zhí)行刪除btn的綁定事件

注：
(a) eventName的值均不含on,例如注冊鼠標點擊事件eventName為“click”
(b) 處理函數(shù)中的this依然指的是指當前dom元素
(c) 通過addEventListener添加的事件處理程序萌壳，只能通過removeEventListener來刪除，也就是說通過addEventListener添加的匿名函數(shù)將無法被刪除日月。

題目2：

attachEvent與addEventListener的區(qū)別？

• 參數(shù)個數(shù)不相同爱咬，這個最直觀，addEventListener有三個參數(shù)精拟，attachEvent只有兩個，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段蜂绎，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設置為冒泡階段）

• 第一個參數(shù)意義不同瘫里，addEventListener第一個參數(shù)是事件類型（比如click荡碾，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick坛吁，onload）

• 事件處理程序的作用域不相同劳殖，addEventListener的作用域是元素本身拨脉，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內運行玫膀，this是window矛缨，所以剛才例子才會返回undefined帖旨，而不是元素id

• 為一個事件添加多個事件處理程序時箕昭，執(zhí)行順序不同解阅，addEventListener添加會按照添加順序執(zhí)行，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的货抄，但是添加的多了就無規(guī)律了)述召，所以添加多個的時候，不依賴執(zhí)行順序的還好积暖，若是依賴于函數(shù)執(zhí)行順序，最好自己處理夺刑，不要指望瀏覽器

題目3：

解釋IE事件冒泡和DOM2事件傳播機制？

• IE事件冒泡：
  事件從目標元素向父級元素傳遞性誉，直到傳遞到 window ( document) 停止窿吩。
• DOM2級事件傳播：有3個階段：
• 捕獲階段：事件從document向子元素一層層傳遞错览，直到目標元素
• 處于目標階段：此時事件發(fā)生在目標元素上煌往，被看做冒泡的一部分
• 冒泡階段：和IE冒泡一樣倾哺，從目標元素向父級元素傳遞刽脖，直到document停止羞海。

題目4：

如何阻止事件冒泡曲管？ 如何阻止默認事件却邓？

• 標準瀏覽器
  stopPagation() 阻止事件冒泡
  preventDefault() 阻止默認事件
• IE瀏覽器
  cancelBubble 設置為true來阻止事件冒泡
  returnValue 設置為false來阻止默認事件

題目5：

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

  <ul class="ct">
      <li>這里是</li>
      <li>饑人谷</li>
      <li>前端6班</li>
  </ul>
  <script>
      function $(str){
        return document.querySelector(str)
      }
      $(".ct").addEventListener("click",function(e){
        if(e.target.tagName.toLowerCase()==="li"){
          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>
    function $(str) {
        return document.querySelector(str)
    }
    var ul = $(".ct")
    var input = $(".ipt-add-content")
    var btnStart = $("#btn-add-start")
    var btnEnd = $("#btn-add-end")

    ul.addEventListener("click", function(e) {
        if (e.target.tagName.toLowerCase() === "li") {
            console.log(e.target.innerText);
        }
    })

    btnStart.addEventListener("click", function() {
        var newLi = document.createElement("li")
        newLi.innerText = input.value;
        if (newLi.innerText === "") {
            alert("please input content");
        } else {
            ul.insertBefore(newLi, ul.firstChild);
        }
    })

    btnEnd.addEventListener("click", function() {
        var newLi = document.createElement("li")
        newLi.innerText = input.value;
        if (newLi.innerText === "") {
            alert("please input content")
        } else {
            ul.appendChild(newLi, ul);
        }
    })
</script>

題目7：

補全代碼场斑，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片漏隐。

<body>
    <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>
        function $(str) {
            return document.querySelector(str)
        }

        function $$(str) {
            return document.querySelectorAll(str)
        }

        var ct = $(".ct")
        var li = $$(".ct>li")
        var preview = $(".img-preview")

        ct.addEventListener("mouseover", function(e) {
            if (e.target.tagName.toLowerCase() === "li") {
                var dataImg = e.target.getAttribute("data-img");
                preview.innerHTML = '<img src = \"' + dataImg + '\">'
            }
        })
    </script>
</body>