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

-DOM0事件監(jiān)聽及使用的本質(zhì)是將事件處理程序（即一個(gè)函數(shù)）賦值給一個(gè)節(jié)點(diǎn)的屬性，以達(dá)到操作DOM節(jié)點(diǎn)的目的，通過給屬性賦值的這種方式状勤，由于時(shí)間上后賦值的屬性會覆蓋先賦值的屬性谴仙，因此DOM0的事件處理程序只能有一個(gè)央星。

-DOM2級事件監(jiān)聽及使用本質(zhì)上是對相應(yīng)的節(jié)點(diǎn)執(zhí)行一個(gè)函數(shù)，而函數(shù)的數(shù)據(jù)類型為對象传货，也就決定了不同的函數(shù)為不同的對象屎鳍，因此DOM2級事件處理程序可以有很多個(gè)
DOM2級事件定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作：addEventListener 和 removeEventListener， 所有的DOM節(jié)點(diǎn)都包含這兩個(gè)方法损离，并且它們都接受三個(gè)參數(shù)：
事件類型
事件處理方法
布爾參數(shù)哥艇，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false僻澎，則是在事件冒泡階段處理

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

DOM2級事件監(jiān)聽及處理程序在IE6十饥、IE6及IE8中并不支持窟勃，但是IE中提供了類似的替代用法，即attachEvent和detachEvent
在添加事件處理程序事addEventListener和attachEvent主要有幾個(gè)區(qū)別

• 參數(shù)個(gè)數(shù)不相同：addEventListener傳遞參數(shù)（事件類型逗堵，事件處理方法秉氧，布爾值），attachEvent傳遞兩個(gè)參數(shù)（事件蜒秤，處理程序）汁咏，attachEvent添加的事件處理程序只能在冒泡階段發(fā)生，ddEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
• 第一個(gè)參數(shù)意義不同作媚，addEventListener第一個(gè)參數(shù)是事件類型（比如click攘滩，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick纸泡，onload）
• 事件處理程序的作用域不相同漂问，addEventListener的作用域是元素本身，console.log(this)中的this指的是觸發(fā)元素女揭，而attachEvent事件處理程序會在全局變量內(nèi)運(yùn)行蚤假，this是window。
• 為一個(gè)事件添加多個(gè)事件處理程序時(shí)吧兔，執(zhí)行順序不同：addEventListener添加會按照添加順序執(zhí)行磷仰，而attachEvent添加多個(gè)事件處理程序時(shí)順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)

題目3： 解釋IE事件冒泡和DOM2事件傳播機(jī)制境蔼？

IE的事件冒泡：事件開始時(shí)由最具體的元素接收灶平，然后逐級向父級元素傳遞，直到傳遞到window
DOM事件流：DOM2級事件規(guī)定事件流包括三個(gè)階段欧穴，事件捕獲階段（事件捕獲與事件冒泡剛好相反民逼，是有window一級一級向子元素進(jìn)行傳遞，直到傳遞至目標(biāo)元素）涮帘，處于目標(biāo)階段拼苍，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會疮鲫，然后是實(shí)際目標(biāo)接收事件吆你，最后是冒泡階段

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

• stopPropagation()方法可以停止事件在DOM層次的傳播妇多，即取消進(jìn)一步的事件捕獲或冒泡。
• 要阻止事件的默認(rèn)行為燕侠，可以使用preventDefault()方法者祖，前提是事件的屬性cancelable值為true

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

  <ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
  </ul>
  <script>
     // 方法1
    var ct = document.querySelector('.ct');
    ct.addEventListener('click', function (e) {
      console.log(e.target.innerText);
    });

    // 方法2
    var liNodes =document.querySelectorAll('li')
    liNodes.forEach(function(node) {
      node.addEventListener('click', function(){
        console.log(this.innerText)
      })
    });
  </script>

題目6： 補(bǔ)全代碼七问，要求：

當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在< li>這里是< /li>元素前添加一個(gè)新元素，內(nèi)容為用戶輸入的非空字符串茫舶；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺展示該元素的文本內(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 addStart = document.querySelector('#btn-add-start')
    var addEnd = document.querySelector('#btn-add-end')
    var iptContent = document.querySelector('.ipt-add-content')
    var container = document.querySelector('ul')
    console.log(container)
    container.addEventListener('click', function (e) {
      console.log(e.target.innerText)
    })
    addStart.addEventListener('click', function () {
      if (iptContent.value !== '') {
        var node = document.createElement('li')
        node.innerText = iptContent.value
        container.insertBefore(node, container.firstChild)
      }
    })
    addEnd.addEventListener('click', function () {
      if (iptContent.value !== '') {
      var node = document.createElement('li')
      node.innerText = iptContent.value
      container.appendChild(node)
      }
    })
  </script>

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

  <ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標(biāo)放置查看圖片3</li>
  </ul>
  <div class="img-preview"></div>
  <script>
    // 方法1
    var liNodes = document.querySelectorAll('li');
    var preview = document.querySelector('.img-preview');

    for (var i = 0; i < liNodes.length; i++) {
      liNodes[i].addEventListener('mouseenter', function () {
        var dataImg = this.getAttribute('data-img');
        preview.innerHTML = '![](' + dataImg + ')'
      });
    }

    //方法2

    // var ct = document.querySelector('.ct')
    // console.log(ct)
    // var imgPre = document.querySelector('.img-preview')
    // console.log(imgPre)
    // ct.addEventListener('mouseover', function (e) {
    //   var path = e.target.getAttribute('data-img');
    //   console.log(path)
    //   imgPre.innerHTML = '![](' + path + ')'
    // })
  </script>