DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別？

• Dom0級(jí)事件處理程序是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩园上恚ㄟ^(guò)將事件處理程序?qū)傩栽O(shè)置為null刪除綁定在元素上的事件處理程序茶鹃。這種方法無(wú)法給一個(gè)事件添加多個(gè)事件處理程序,后面添加的程序會(huì)覆蓋前面的程序科侈。示例：

    // 添加事件處理程序
    var btn=document.querySelector("#btn")
    btn.onclick=function () {
        console.log(this)
    }
    // 刪除事件處理程序
    btn.onclick=null
  

• Dom2級(jí)定義了addEventctener()和removeEventctener()用于處理指定和刪除事件處理程序霉赡。它們都接受3個(gè)參數(shù)，要處理的事件名颤陶、作為事件處理程序的函數(shù)和一個(gè)布爾值颗管。最后這個(gè)布爾值參數(shù)如果是true，表示在捕獲階段調(diào)用事件處理程序滓走；如果是false垦江，表示在冒泡階段調(diào)用事件處理程序，如果沒(méi)有第三個(gè)參數(shù)默認(rèn)為事件冒泡(可以指定多個(gè)處理程序搅方，兼容ie9及以上瀏覽器)比吭。

    var btn=document.querySelector("#btn")
    var handler=function(){
        console.log(this)
    }
    // 指定事件處理程序
    btn.addEventctener("click",handler)
    // 刪除事件處理程序
    btn.removeEventctener("click",handler)
  

attachEvent與addEventctener的區(qū)別？

• attEventctener是DOM2級(jí)規(guī)定的事件監(jiān)聽(tīng)函數(shù)姨涡，而在ie9以下的瀏覽器中沒(méi)有實(shí)現(xiàn)這個(gè)函數(shù)衩藤，attachEvent就是attEventctener在低版本ie下的兼容方案
• 區(qū)別：
  • attEventctener事件處理函數(shù)的第一個(gè)參數(shù)會(huì)接收一個(gè)代表事件的狀態(tài)的event對(duì)象，而attachEvent中的event對(duì)象需要通過(guò)window.event調(diào)用涛漂。
  • attEventctener事件處理函數(shù)中的this指向綁定這個(gè)處理函數(shù)的DOM對(duì)象赏表，而attachEvent中的this指向window對(duì)象

解釋IE事件冒泡和DOM2事件傳播機(jī)制？

• IE瀏覽器認(rèn)為當(dāng)你觸發(fā)某個(gè)事件怖喻，比如點(diǎn)擊了某個(gè)按鈕時(shí)底哗，你同時(shí)也點(diǎn)擊了這個(gè)元素的祖先元素岁诉，所以锚沸，當(dāng)某個(gè)元素觸發(fā)事件時(shí)它的祖先元素的對(duì)應(yīng)事件也會(huì)被觸發(fā)，順序是從當(dāng)前元素向所有祖先元素依次觸發(fā)涕癣，這就叫事件冒泡哗蜈。如圖

• 而在當(dāng)時(shí)，ie的競(jìng)爭(zhēng)對(duì)手也同樣這么認(rèn)為坠韩，不過(guò)它的實(shí)現(xiàn)方式是從最外層元素到最內(nèi)層元素依次觸發(fā)距潘，這被稱(chēng)為事件捕獲。如圖

• DOM事件傳播機(jī)制綜合了這兩種事件傳播機(jī)制只搁，它讓瀏覽器先發(fā)生事件捕獲音比，而后觸發(fā)當(dāng)前元素的事件，然后在發(fā)生事件冒泡氢惋。如圖

如何阻止事件冒泡洞翩？ 如何阻止默認(rèn)事件稽犁？

• 通過(guò)調(diào)用事件對(duì)象(Event)的stopPropagation()方法可以阻止目標(biāo)元素的冒泡事件（支持ie9及以上瀏覽器）。而在低版本ie中可以使用 window.event.cancelBubble = true 來(lái)阻止事件冒泡
• 通過(guò)調(diào)用事件對(duì)象(Event)的preventDefault()方法可以阻止瀏覽器的默認(rèn)行為（支持ie9及以上瀏覽器）骚亿。而在低版本ie中可以使用 window.event.returnValue = false 來(lái)默認(rèn)行為

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

<ul class="ct">
  <li>這里是</li>
  <li>饑人谷</li>
  <li>前端6班</li>
</ul>
<script>
  var ct = document.querySelector('.ct')

  ct.addEventListener('click', function (e) {
  var target = e.target
    if (target.tagName.toLowerCase() === 'li') {
      console.log(target.innerText)
    }
  })
</script>

補(bǔ)全代碼来屠，要求:

• 當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素虑椎，內(nèi)容為用戶(hù)輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶(hù)輸入的非空字符串.

• 當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(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">開(kāi)頭添加</button>
    <button id="btn-add-end">結(jié)尾添加</button>
    <script>
        var ct = document.querySelector('.ct')
        var btnStart = document.querySelector('#btn-add-start')
        var btnEnd = document.querySelector('#btn-add-end')
        var content = document.querySelector('.ipt-add-content')
        ct.addEventListener('click', function (e) {
            var target = e.target
            if (target.tagName.toLowerCase() === 'li') {
                console.log(target.innerText)
            }
        })
        btnStart.addEventListener('click', function () {
          if (content.value) {
          var liNode = document.createElement('li')
          liNode.innerText = content.value
          ct.insertBefore(liNode, ct.firstChild)
          }
        })
       btnEnd.addEventListener('click', function () {
         if (content.value) {
         var liNode = document.createElement('li')
         liNode.innerText = content.value
         ct.appendChild(liNode)
         }
       })
    </script>
  

補(bǔ)全代碼捆姜，要求：當(dāng)鼠標(biāo)放置在li元素上，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片迎膜。

<ul class="ct">
  <li data-img="1.png">鼠標(biāo)放置查看圖片1</li>
  <li data-img="2.png">鼠標(biāo)放置查看圖片2</li>
  <li data-img="3.png">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
  var ct = document.querySelector('.ct')
  var imgBox = document.querySelector('.img-preview')

  ct.addEventListener('mouseover', function (e) {
    var target = e.target
    if (target.tagName.toLowerCase() === 'li') {
      var img = document.createElement('img')
      img.src = target.getAttribute('data-img')
      imgBox.innerHTML = ''
      imgBox.appendChild(img)
    }
  })
  ct.addEventListener('mouseout', function (e) {
    var target = e.target
    if (target.tagName.toLowerCase() === 'li') {
      imgBox.innerHTML = ''
    }
  })
</script>