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

DOM0事件 通過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序?qū)傩浴?br> 每個元素都有自己的事件處理程序?qū)傩允觯纾簅nclick塞绿、onmouseover、onmouseout等。
不能為該事件添加多個處理程序凄敢，因為會被覆蓋。
刪除事件處理程序 賦值為null

 <input id="btnClick" type="button" value="Click Here" />
 <script type="text/javascript">
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
         alert(this.id);
      };
 </script>

DOM2級事件’DOM2級事件’定義了兩個方法庸追，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener();所有的DOM節(jié)點都包含這兩種方法霍骄。
它們都接受3個參數(shù)：要處理的事件名，事件處理程序的函數(shù)淡溯，和一個布爾值读整。 最后一個參數(shù)：如果為true，表示在捕獲階段調(diào)用事件處理程序咱娶，如果是false米间，表示在冒泡階段調(diào)用事件處理程序，默認值為false膘侮。
因為是函數(shù)屈糊，可以綁定多個同類型的事件，會按照順序執(zhí)行琼了。

<input id="btnClick" type="button" value="Click Here" />
<script type="text/javascript">
  var btnClick = document.getElementById('btnClick');

  btnClick.addEventListener('click', function() {
     alert(this.id);
  }, false);

  btnClick.addEventListener('click', function() {
     alert('Hello!');
  }, false);
</script>

removeEventListener('click',function(){...},false)
通過addEventListener()添加的匿名函數(shù)無法移除：只是相當(dāng)于創(chuàng)建了一個寫法一樣的函數(shù)然后刪除 與add添加的匿名函數(shù)是倆個函數(shù) 所以要刪除如下：

 btnClick.addEventListener('click',function handler(){
   alert(this.id)
  },false) 
btnClick.removerEventListener('click',handler,false)

attachEvent與addEventListener的區(qū)別逻锐？

參數(shù)個數(shù)不相同，addEventListener有三個參數(shù)雕薪，attachEvent只有兩個昧诱，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）

第一個參數(shù)意義不同蹦哼，addEventListener第一個參數(shù)是事件類型（比如click鳄哭，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick纲熏，onload）

addEventListener的作用域是元素本身妆丘，this是指的觸發(fā)元素，而attachEvent事件處理程序會在全局變量內(nèi)運行局劲，this是window

addEventListener添加會按照添加順序執(zhí)行勺拣，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)鱼填，所以添加多個的時候药有，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序苹丸，最好自己處理愤惰，不要指望瀏覽器

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

IE事件冒泡事件開始時由最具體的元素接收赘理，然后逐級向上執(zhí)行

如何阻止事件冒泡？ 如何阻止默認事件响疚？

stopPropagation()方法可以停止事件在DOM層次的傳播鄙信，即取消進一步的事件捕獲或冒泡。

要阻止事件的默認行為忿晕，可以使用preventDefault()方法装诡，前提是cancelable值為true，比如我們可以阻止鏈接導(dǎo)航這一默認行為

 document.querySelector('#btn').onclick = function (e) {
    e.preventDefault();
 }

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

<ul class="ct">
  <li>這里是</li>
  <li>饑人谷</li>
  <li>前端6班</li>
</ul>

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

補全代碼，要求：當(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 iptContent = document.querySelector('.ipt-add-content')
var startAdd = document.querySelector('#btn-add-start')
var endAdd = document.querySelector('#btn-add-end')
var liList = document.querySelectorAll('li')
var ctNode = document.querySelector('.ct')

ctNode.addEventListener('click',function (e) {
   if(e.target.tagName.toLowerCase() === 'li'){
     console.log(e.target.innerText)
   }
})

startAdd.addEventListener('click',function () {
  if (iptContent.value.length === 0) {
    alert('不能為空')
  }else{
    var newli = document.createElement('li');
    newli.innerText = iptContent.value
    ctNode.insertBefore(newli,ctNode.childNodes[0])
  }
})

endAdd.addEventListener('click',function () {
  if (iptContent.value.length === 0) {
    alert('不能為空')
  }else{
    var newli = document.createElement('li')
    newli.innerText = iptContent.value
    ctNode.appendChild(newli)
  }
})
</script>

補全代碼谅河，要求：當(dāng)鼠標(biāo)放置在li元素上咱旱，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(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 liList = document.querySelectorAll('li')
var ctNode = document.querySelector('.ct')
var imgShow =document.querySelector('.img-preview')

ctNode.addEventListener('mouseenter',function (e) {
  var dataImg = e.target.getAttribute('data-img')
  var imgPre = document.createElement('img')
  imgPre.setAttribute('src','dataImg')
  imgShow.appendChild(imgPre)
})
</script>