小練習(xí)：

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

DOM0級(jí)

Dom0級(jí)事件處理程序是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩?，要使用JavaScript指定事件處理程序，首先要獲得一個(gè)要操作的對(duì)象的引用，然后通過(guò)其事件處理程序?qū)傩裕ㄟ@些屬性通常全部小寫(xiě)，例如：onclick），指定事件處理程序。

 var btn = document.getElementById('myBtn');
 btn.onclick = function() {
   console.log(this.id);
 };

如果需要?jiǎng)h除DOM0級(jí)事件處理程序，只需將相應(yīng)屬性值設(shè)置為null。

btn.onclick = null;

• 優(yōu)點(diǎn)：簡(jiǎn)單且跨瀏覽器；
• 缺點(diǎn)：一個(gè)事件處理程序只能對(duì)應(yīng)一個(gè)處理函數(shù)，給一個(gè)事件添加多個(gè)事件處理程序,后面的程序會(huì)覆蓋前面的程序。

DOM2級(jí)

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

1. addEventListener
2. removeEventListener

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

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

 var btn = document.getElementById('myBtn');
 var handler = function() {
   console.log(this.id);
 };

 // 添加事件處理程序
 btn.addEventListener('click', handler, false);

 // 刪除事件處理程序
 btn.removeEventListener('click', handler, false);

• 優(yōu)點(diǎn)：能夠?qū)崿F(xiàn)同時(shí)綁定多個(gè)事件而不覆蓋；
• 缺點(diǎn)：IE并不支持addEventListener和removeEventListener方法。

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

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

2. 第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類(lèi)型（比如click，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱(chēng)（onclick，onload）

3. 事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window，所以剛才例子才會(huì)返回undefined，而不是元素id

4. 為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同，addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無(wú)規(guī)律了)，所以添加多個(gè)的時(shí)候，不依賴(lài)執(zhí)行順序的還好，若是依賴(lài)于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器。

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

• IE的事件冒泡

事件開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的元素；

IE bubble

• DOM事件流

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

DOM2 bubble

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

• 阻止事件捕獲、冒泡：

event.stopPropagation();

• 阻止事件默認(rèn)行為：

event.preventDefault(); 

• 阻止冒泡的兼容寫(xiě)法，值為false為允許冒泡：

event.cancelBubble = true;

event.cancelBubble = false;

• 阻止默認(rèn)事件的兼容寫(xiě)法，值為flase為允許默認(rèn)事件：

event.returnValue = true; 

event.returnValue = false;

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

 <ul class="ct">
   <li>Hello</li>
   <li>World</li>
   <li>!</li>
 </ul>

 var ct = document.querySelector('.ct');
 ct.addEventListener('click', function(e) {
   if (e.target.tagName.toLowerCase() === 'li') {
     console.log(e.target.innerText);
   }
 }, false);

題目6：補(bǔ)全代碼，要求：

當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(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>Hello</li>
    <li>World</li>
    <li>!</li>
  </ul>
  <input id="input-content" placeholder="please input content" type="text">
  <button id="btn-add-start">開(kāi)頭添加</button>
  <button id="btn-add-end">結(jié)尾添加</button>

  var ct = document.querySelector('.ct'),
    addStartBtn = document.querySelector('#btn-add-start'),
    addEndBtn = document.querySelector('#btn-add-end'),
    inputContent = document.querySelector('#input-content');

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

  addStartBtn.addEventListener('click', function(e) {
    if (/^\s*$/.test(inputContent.value)) {
      console.log('輸入的是空字符串');
    } else {
      var li = document.createElement('li');
      li.innerText = inputContent.value;
      ct.insertBefore(li, ct.firstChild);
    }
  }, false);

  addEndBtn.addEventListener('click', function(e) {
    if (/^\s*$/.test(inputContent.value)) {
      console.log('輸入的是空字符串');
    } else {
      var li = document.createElement('li');
      li.innerText = inputContent.value;
      ct.appendChild(li);
    }
  }, false);

題目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="http://ov2hj85gi.bkt.clouddn.com/people-sea.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="http://ov2hj85gi.bkt.clouddn.com/Sky-background.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="http://ov2hj85gi.bkt.clouddn.com/sky-sea-finish.jpg">鼠標(biāo)放置查看圖片3</li>
  </ul>
  <div class="img-preview"></div>

  var ul = document.querySelector('.ct');
  var imgPreview = document.querySelector('.img-preview');
  ul.addEventListener('mouseover', function(e) {
    if (e.target.tagName.toLowerCase() === 'li') {
      var img = e.target.getAttribute('data-img');
      imgPreview.innerHTML = '<img src = "' + img + '">';
    }
  }, false);