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

在DOM0級(jí)處理程序，事件名以on開頭坛怪，比如click事件處理程序就是onclick,load事件就是onload镇防。
通過(guò)js來(lái)添加DOM0事件處理程序時(shí)，首先要獲得一個(gè)要操作對(duì)象的引用瞒津，然后通過(guò)其事件處理程序?qū)傩?這些屬性通常全部小寫)蝉衣，指定事件處理程序。

var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert('call o'clock event');
}

DOM0級(jí)事件處理程序可以認(rèn)為是元素的方法巷蚪。刪除DOM0級(jí)事件處理程序病毡，將相應(yīng)屬性設(shè)置null即可。

btn.onclick = null;

DOM2中定義了兩個(gè)方法addEventListener()和removeEventListener()钓辆，分別用于添加事件處理程序和刪除處理程序剪验。

二者區(qū)別：

使用DOM2級(jí)方法添加事件處理程序的主要好處是可以添加多個(gè)事件處理程序肴焊，而DOM0級(jí)為一個(gè)事件添加多個(gè)事件處理程序時(shí)，后面的程序會(huì)覆蓋前面的功戚。

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

在早起的IE瀏覽器中沒(méi)有實(shí)現(xiàn)addEventListener()和removeEventListener()，但提供了兩個(gè)替代方法attachEvent()和detachEvent()啸臀。
attachEvent與addEventListener的區(qū)別：

• 參數(shù)個(gè)數(shù)不相同届宠。addEventListener有三個(gè)參數(shù)，attachEvent有兩個(gè)參數(shù)乘粒，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段豌注，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是在冒泡階段處理
• 第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類型(比如click, load),而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)的名稱(onclick, onload)
• 事件處理程序的作用域不同灯萍，addEventListener的作用域是元素本身轧铁，this指的是觸發(fā)元素，attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行旦棉，this是window齿风。
• 為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同绑洛，addEventListener添加會(huì)按照添加順序執(zhí)行救斑，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律。

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

事件冒泡：子元素嵌套在父元素內(nèi)部脸候，點(diǎn)擊子元素的時(shí)候一定同時(shí)表示點(diǎn)擊了父元素，這個(gè)時(shí)候绑蔫，先觸發(fā)子元素的事件處理器运沦，然后再觸發(fā)父元素的事件處理器，如果父元素的父元素還有處理器晾匠，就一直向上觸發(fā)茶袒，一直到 body 元素。就像魚吐泡泡一樣凉馆，從水下向水面走薪寓，每向上走一層就會(huì)查看這一層有沒(méi)有事件處理器，如果有的話就會(huì)觸發(fā)澜共，如果沒(méi)有的話就繼續(xù)向上尋找向叉，直到頂層的 body，才結(jié)束尋找事件嗦董。

事件冒泡

DOM2級(jí)事件流母谎，總共分為三個(gè)階段：事件捕獲， 目標(biāo)元素京革，事件冒泡奇唤。DOM 2級(jí)規(guī)范將事件捕獲和事件冒泡都收入自己的囊中幸斥，所以你可以在一個(gè)元素上同時(shí)注冊(cè)事件捕獲和事件冒泡，也就是說(shuō)你可以選擇父級(jí)元素事件處理器后觸發(fā)咬扇，也可以選擇先觸發(fā)甲葬，甚至可以選擇先觸發(fā)父級(jí)元素的捕獲事件，再觸發(fā)父級(jí)元素的冒泡事件懈贺【眩可以通過(guò)設(shè)置addEventListener第三個(gè)參數(shù)來(lái)控制。

DOM2事件流

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

document.querySelector('a').onclick= function(e){
    e.preventDefault() //阻止默認(rèn)事件
    e.stopPropagation() //阻止事件進(jìn)一步捕獲或冒泡
    console.log(this.href)
  }

題目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 lists = document.querySelectorAll('.ct>li');
      lists.forEach(function(list){
        list.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í)控制臺(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 lists = document.querySelector('.ct');
      var input = document.querySelector('.ipt-add-content');

      document.getElementById('btn-add-start').addEventListener('click', function() {
        var addLi = document.createElement('li');
        addLi.innerText = input.value;
        if (input.value != '') {
          lists.insertBefore(addLi, lists.firstChild);
        }
      })

      document.getElementById('btn-add-end').addEventListener('click', function() {
        var addLi = document.createElement('li');
        addLi.innerText = input.value;
        if (input.value != '') {
        lists.appendChild(addLi);
       }
      })

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

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="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 lists = document.querySelectorAll('.ct>li');
      var imgDisplay = document.querySelector('.img-preview');
      lists.forEach(function(list){
        list.addEventListener('mouseenter', function(){
          var url = this.getAttribute('data-img');
          var img = document.createElement('img');
          img.setAttribute('src', url);
          imgDisplay.appendChild(img);
        })
      })
</script>