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

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

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

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

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

• IE事件冒泡:從發(fā)生事件的元素開始,逐步向上傳播.
  事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素

image.png

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

image.png

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

• 在IE瀏覽器中
  可以通過設(shè)置cancelBubble=true來阻止事件冒泡,
  通過設(shè)置returnValue=false來阻止默認(rèn)事件.

• 在非IE瀏覽器中
  可以用stopPropagation()來阻止事件冒泡和捕獲,
  通過preventDefault()來阻止默認(rèn)行為.

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

<ul class="ct">
  <li>這里是</li>
  <li>饑人谷</li>
  <li>前端6班</li>
</ul>
<script>
//todo ...
var ul = document.querySelector('.ct');
ul.addEventListener('click',function(e){
   if(e.target.tagName.toLowerCase() === 'li'){
    console.log(e.target.innerText);
    }
  },false)

題目6： 補全代碼，要求：

當(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 ul = document.querySelector('.ct');
var content = document.querySelector('.ipt-add-content');
var start = document.querySelector('#btn-add-start');
var end = document.querySelector('#btn-add-end');

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

start.addEventListener('click',function(){
    if(/^\s*$/.test(content.value)){       //正則判斷輸入是否為空字符串
        console.log('輸入為空字符');
    }else{
        var newLi = document.createElement('li');
        newLi.innerText = content.value;
        ul.insertBefore(newLi,ul.firstElementChild);  //添加到第一個元素之前
      }
    },false)

end.addEventListener('click',function(){
    if(/^\s*$/.test(content.value)){
        console.log('輸入為空字符');
    }else{
        var newLi = document.createElement('li');
        newLi.innerText = content.value;
        ul.appendChild(newLi,ul.lastElementChild);
      }
    },false)
</script>

題目7： 補全代碼，要求：當(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 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)
</script>