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

• DOM0事件：
  通過javascript制定事件處理程序，就是把一個(gè)方法賦值給一個(gè)元素的事件處理程序?qū)傩酝碳印Ｃ總€(gè)元素都有自己的事件處理程序?qū)傩燥醯海@些屬性名稱通常為小寫，如onclick等孵滞，將這些屬性的值設(shè)置為一個(gè)函數(shù)诬滩，就可以指定事件處理程序。

    // 添加事件處理程序
    var btnClick = document.getElementById('btnClick');
    btnClick.onclick = function showMessage() {
        alert(this.id);
    };
    // 刪除事件處理程序
    btn.onclick=null;

• DOM2級(jí)事件：
  DOM2級(jí)事件定義了兩個(gè)方法用于處理指定和刪除事件處理程序的操作：

  1. addEventListener
  2. removeEventListener

  所有的DOM節(jié)點(diǎn)都包含這兩個(gè)方法踩官，并且它們都接受三個(gè)參數(shù)：

  1. 事件類型
  2. 事件處理方法
  3. 布爾參數(shù)却桶，如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false，則是在事件冒泡階段處理

    var btnClick = document.getElementById('btnClick');
    var handler=function() {
        alert(this.id);
    }
    // 指定事件處理程序
    btnClick.addEventListener('click', handler, false);
    // 刪除事件處理程序
    btnClick.removeEventListener('click', handler, false);

attachEvent與addEventListener的區(qū)別

• 瀏覽器支持情況不同： IE9 以下的瀏覽器不支持 addEventListener 方法颖系，IE 中有與其類似的事件監(jiān)聽方法 attachEvent() 和 detachEvent()
• 參數(shù)個(gè)數(shù)不相同 ：addEventListener 有三個(gè)參數(shù) (type, handle, true/false)嗅剖。attachEventListener 只有兩個(gè)參數(shù)(type, handle)，因?yàn)?attachEvent 監(jiān)聽的事件只能發(fā)生在冒泡階段嘁扼，所以為了兼容性信粮，一般把a(bǔ)ddEventListener 的第三個(gè)參數(shù)設(shè)為 false。
• 第一個(gè)參數(shù)不同：addEvnentListener 第一個(gè)參數(shù)是一個(gè)方法趁啸，如 click, scroll强缘。attachEvent 第一個(gè)參數(shù)是事件名稱，如 onclick不傅，onscroll旅掂。
• 事件處理程序的作用域不同： DOM2級(jí)事件處理程序所處作用域在所屬的元素內(nèi)進(jìn)行，此時(shí) this 指向這個(gè)元素访娶。使用 attachEvent() 方法時(shí)商虐，事件處理程序在全局作用域內(nèi)進(jìn)行，此時(shí) this 指向 window崖疤。
• 為一個(gè)事件添加多個(gè)事件處理程序時(shí)秘车，執(zhí)行順序不同： addEventListener 添加會(huì)按照添加順序執(zhí)行，而 attachEvent 添加多個(gè)事件處理程序時(shí)順序無規(guī)律（在 IE9一下劫哼，添加方法較少時(shí)叮趴，各方法按添加順序的反順序進(jìn)行，添加方法多時(shí)則亂序進(jìn)行）

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

IE事件冒泡：事件開始時(shí)由最具體的元素接收权烧，然后逐級(jí)向上傳播到較為不具體的元素眯亦。

DOM2事件傳播：DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段般码，處于目標(biāo)階段搔驼，事件冒泡階段，首先發(fā)生的是事件捕獲侈询，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件糯耍，最后是冒泡階段扔字。

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

// 阻止事件冒泡
function stopPropgation(e){
  if (e && e.stopPropagation) {
    e.stopPropagation(); // W3C標(biāo)準(zhǔn)
  }else {
    window.event.cancelBubble = true; // IE瀏覽器
  }
}

// 阻止默認(rèn)事件
function preventDefault(e){
  if (e && e.stopPropagation) {
    e.preventDefault(); // W3C標(biāo)準(zhǔn)
  }else {
    window.event.returnValue = false; // IE瀏覽器
  }
}

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

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)班</li>
</ul>
<script>
  let ct = document.querySelector('.ct')
  ct.addEventListener('click',function(e){
    console.log(e.target.innerText)  
  })
</script>

補(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 id="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
  var ct = document.querySelector('.ct');
  var addStartBtn = document.querySelector('#btn-add-start');
  var addEndBtn = document.querySelector('#btn-add-end');
  var ipt = document.querySelector('#ipt-add-content');
  
  ct.addEventListener('click', function(e){
    console.log(e.target.innerText);
  });
  
  addEndBtn.addEventListener('click', function(){
     var li = document.createElement('li');
     if(ipt.value !== '') {
       li.innerText = ipt.value;
       ct.appendChild(li);
     } else {
       alert('內(nèi)容不能為空');
     }
  });
  
  addStartBtn.addEventListener('click', function(){
     var li = document.createElement('li');
     if(ipt.value !== '') {
       li.innerText = ipt.value;
       ct.insertBefore(li,ct.firstChild);
     }else {
       alert('內(nèi)容不能為空');
     }
  });
</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 preview = 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');
      preview.innerHTML = '';
      preview.appendChild(img);
    }
  });
  ct.addEventListener('mouseout', function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() === 'li') {
      preview.innerHTML = '';
    }
  });
</script>