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

• DOM0級(jí)事件,添加多個(gè)事件處理程序時(shí), 會(huì)出現(xiàn)后面的覆蓋前面的這種情況,
  而DOM2則不會(huì)出現(xiàn)這種情況.
• DOM0有兩種方式,一種是通過(guò)內(nèi)聯(lián)方式,另一種是通過(guò)on+事件名的方式.
• DOM2級(jí)事件通過(guò)addEventListener和removeEventListener來(lái)填加事件監(jiān)聽和刪除事件的監(jiān)聽,接受三個(gè)參數(shù),事件類型,事件處理方法,布爾值(true表示事件捕獲階段響應(yīng).false表示事件冒泡階段響應(yīng).默認(rèn)false),不能通過(guò)removeEventListener來(lái)移除匿名函數(shù).

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

• attachEvent添加的事件只能在冒泡階段處理,addEventListener可以通過(guò)參數(shù)來(lái)決定處理程序是在冒泡階段還是在捕獲階段處理.
• 第一個(gè)參數(shù)不同,attachEvent第一個(gè)參數(shù)是on....,比如onclick,而addEventListener是click,沒有on.
• this的指代不同,在attachEvent的函數(shù)中this指的是window,而在addEventListener,this指的是被監(jiān)聽的元素.
• 為一個(gè)事件添加多個(gè)事件處理程序時(shí),執(zhí)行順序不同:addEventListener會(huì)按照添加的順序執(zhí)行,attachEvent添加多個(gè)事件處理程序時(shí),在執(zhí)行時(shí)沒有規(guī)律.

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

• IE事件冒泡:從發(fā)生事件的元素開始,逐步向上傳播.
• DOM2事件傳播:分為三個(gè)階段,事件捕獲階段,處于目標(biāo)階段,最后是冒泡階段.

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

• 在IE瀏覽器中可以通過(guò)設(shè)置cancelBubble=true來(lái)阻止事件冒泡,通過(guò)設(shè)置returnValue=false來(lái)阻止默認(rèn)事件.
• 在非IE瀏覽器中可以用stopPropagation來(lái)阻止事件冒泡和捕獲,通過(guò)preventDefault()來(lái)阻止默認(rèn)行為.

題目5：有如下代碼，要求當(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(event){
     if(event.target.tagName.toLowerCase() === 'li'){
        console.log(event.target.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í)控制臺(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">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
//你的代碼
  var ct = $('.ct');
  var inputText = $('.ipt-add-content')
  var startBtn = $('#btn-add-start')
  var endBtn = $('#btn-add-end')
  ct.addEventListener('click',function(e){
    if(event.target.tagName.toLowerCase() === 'li'){
        console.log(event.target.innerText);
     }
  })
  startBtn.addEventListener('click',function(e){
    if(inputText.value !== ''){
        var child = document.createElement('li')
        child.innerText = inputText.value;
        ct.insertBefore(child,ct.children[0])
     }
  })
  endBtn.addEventListener('click',function(e){
    if(inputText.value !== ''){
        var child = document.createElement('li')
        child.innerText = inputText.value;
        ct.appendChild(child)
     }
  })
  function $(str){
    return document.querySelector(str)
  }

題目7： 補(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="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1794894692,1423685501&fm=116&gp=0.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=819201812,3553302270&fm=116&gp=0.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1350614941,725003865&fm=116&gp=0.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
//你的代碼
  var ct = document.querySelector('.ct')
  ct.addEventListener('mouseover',function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
      var imgStr = e.target.getAttribute("data-img");
      // console.log(imgStr)
      var imgDiv = document.querySelector('.img-preview')
      imgDiv.innerHTML = '![](+imgStr+)'
    }
  })
</script>