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).默認false),不能通過removeEventListener來移除匿名函數(shù).

2： 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甸箱，所以剛才例子才會返回undefined迅脐，而不是元素id

• 為一個事件添加多個事件處理程序時，執(zhí)行順序不同围小，addEventListener添加會按照添加順序執(zhí)行肯适，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的成榜，但是添加的多了就無規(guī)律了)，所以添加多個的時候刘绣，不依賴執(zhí)行順序的還好挣输，若是依賴于函數(shù)執(zhí)行順序，最好自己處理撩嚼，不要指望瀏覽器

3： 解釋IE事件冒泡和DOM2事件傳播機制停士？

• IE事件冒泡:從發(fā)生事件的元素開始,逐步向上傳播.
• DOM2事件傳播:分為三個階段,事件捕獲階段,處于目標階段,最后是冒泡階段.

4：如何阻止事件冒泡？ 如何阻止默認事件完丽？

• 在IE瀏覽器中可以通過設(shè)置cancelBubble=true來阻止事件冒泡,通過設(shè)置returnValue=false來阻止默認事件.
• 在非IE瀏覽器中可以用stopPropagation來阻止事件冒泡和捕獲,通過preventDefault()來阻止默認行為.

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

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

補全代碼逻族，要求：

• 當(dāng)點擊按鈕開頭添加時在這里是 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 ct = $('.ct');
var inputText = $('.ipt-add-content')
var startBtn = $('#btn-add-start')
var endBtn = $('#btn-add-end')
ct.addEventListener('click',function(e){
  if(event.target.tagName.toLowerCase() === 'li'){
      console.log(event.target.innerText);
   }
})
startBtn.addEventListener('click',function(e){
  if(inputText.value !== ''){
      var child = document.createElement('li')
      child.innerText = inputText.value;
      ct.insertBefore(child,ct.children[0])
   }
})
endBtn.addEventListener('click',function(e){
  if(inputText.value !== ''){
      var child = document.createElement('li')
      child.innerText = inputText.value;
      ct.appendChild(child)
   }
})
function $(str){
  return document.querySelector(str)
}
</script>

7： 補全代碼薄辅，要求：當(dāng)鼠標放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片站楚。

<ul class="ct">
    <li data-img="1.png">鼠標放置查看圖片1</li>
    <li data-img="2.png">鼠標放置查看圖片2</li>
    <li data-img="3.png">鼠標放置查看圖片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 img = e.target.getAttribute('data-img');
    preview.innerHTML = '<img src = "' + img + '">';
});
</script>