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

• DOM0事件處理程序，事件名以'on'開頭,可以直接通過(guò) onclick寫在html里面的事件, 比如:

<input onclick="alert(1)" />

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

• DOM2是通過(guò)addEventListener綁定的事件, 還有IE下的DOM2事件通過(guò)attachEvent綁定;
  DOM2級(jí)的事件規(guī)定了事件流包含三個(gè)階段包括： 1：事件捕獲， 2：處于目標(biāo)階段， 3：事件冒泡階段（IE8以及更早版本不支持DOM事件流）;
  DOM0的事件具有極好的跨瀏覽器優(yōu)勢(shì), 會(huì)以最快的速度綁定, 如果你通過(guò)DOM2綁定要等到JS運(yùn)行, DOM0不用, 因?yàn)镈OM0是寫在元素上面的

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

1.支持的瀏覽器不同，attachEvent在IE9以下的版本中受到支持。其它的都支持addEventListener。
2.參數(shù)個(gè)數(shù)不相同，這個(gè)最直觀，addEventListener有三個(gè)參數(shù)，attachEvent只有兩個(gè)，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
3.第一個(gè)參數(shù)意義不同，addEventListener第一個(gè)參數(shù)是事件類型（比如click，load），而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）
4.事件處理程序的作用域不相同，addEventListener的作用域是元素本身，this是指的觸發(fā)元素，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window，所以剛才例子才會(huì)返回undefined，而不是元素id
5.為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同，addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無(wú)規(guī)律了)，所以添加多個(gè)的時(shí)候，不依賴執(zhí)行順序的還好，若是依賴于函數(shù)執(zhí)行順序，最好自己處理，不要指望瀏覽器

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

ie事件模型的事件流只包括事件冒泡，而dom（2）事件模型的事件流包括三個(gè)階段：事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。ie8以下的版本只支持ie事件模型，ie9及其他瀏覽器都支持dom事件流。

區(qū)別：
（1）添加事件處理程序的不同。dom0級(jí)只能在冒泡階段調(diào)用事件處理程序。dom2級(jí)事件模型通過(guò)addEventListener支持在冒泡和捕獲階段注冊(cè)事件處理程序。而ie事件模型通過(guò)attachEvent在事件冒泡階段注冊(cè)事件處理程序。
（2）事件處理程序的event參數(shù)和this的作用域不同。addEventListener中的this就指向當(dāng)前事件元素，event就是當(dāng)前事件對(duì)象。而attachEvent的this指向window，event是全局對(duì)象作用域window中的event對(duì)象，但是同時(shí)也會(huì)作為參數(shù)直接傳遞給事件處理程序函數(shù)。但是在只支持ie事件模型的瀏覽器中通過(guò)dom0級(jí)方法注冊(cè)的事件處理程序中的event，只能通過(guò)全局的window.event進(jìn)行訪問(wèn)，但無(wú)論在哪個(gè)瀏覽器中，通過(guò)dom0級(jí)注冊(cè)的事件處理程序中的this也是指向當(dāng)前事件元素，可以做到很好的跨瀏覽器兼容。
（3）移除事件監(jiān)聽。通過(guò)dom0級(jí)注冊(cè)的事件處理程序，通過(guò) element.onclick=null;這樣的形式來(lái)移除注冊(cè)事件。通過(guò)dom2級(jí)事件注冊(cè)的時(shí)間處理程序通過(guò)removeEventListener來(lái)移除事件處理程序，而ie事件模型通過(guò)datachEvent來(lái)移除。
（4）阻止默認(rèn)事件模型和阻止事件冒泡的方法。dom2級(jí)可以通過(guò)preventDefault來(lái)阻止事件的默認(rèn)行為。ie通過(guò)returnValue屬性為false來(lái)阻止事件的默認(rèn)行為。dom2采用stopPropagation方法來(lái)阻止冒泡，而ie通過(guò)cancelBubble屬性為true來(lái)阻止冒泡。

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

• 阻止事件冒泡:
  w3c 的方法是 e.stopPropagation()，IE 則是使用 e.cancelBubble = true

function stopHandler(event)  
    window.event?window.event.cancelBubble=true:event.stopPropagation();  
}  

• 阻止默認(rèn)事件:
  w3c 的方法是 e.preventDefault()，IE 則是使用 e.returnValue = false;

function cancelHandler(event){  
  var event = event || window.event;  //用于IE  
  if(event.preventDefault) event.preventDefault();  //標(biāo)準(zhǔn)技術(shù)  
  if(event.returnValue) event.returnValue = false;  //IE  
  return false;   //用于處理使用對(duì)象屬性注冊(cè)的處理程序  
} ``` 

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

<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
document.querySelector('.ct').addEventListener('click',function(e){
console.log(e.target.innerText)//e.target指向被點(diǎn)擊的元素,而this指向'.ct'
})
</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 ct = document.querySelector('.ct')
    var input = document.querySelector('.ipt-add-content')
    var endBtn = document.querySelector('#btn-add-end')
    var startBtn = document.querySelector('#btn-add-start')
    startBtn.addEventListener('click',function(){
        if(/\S/.test(input.value)){
            var newLi = document.createElement('li')
            newLi.innerText = input.value
            ct.insertBefore(newLi,ct.firstChild)//在第一個(gè)元素前添加元素,要有個(gè)參照點(diǎn)firstLi
         }
    }) 
    endBtn.addEventListener('click',function(){
        if(/\S/.test(input.value)){
            var newLi = document.createElement('li')
            newLi.innerText = input.value
            ct.appendChild(newLi)
        }
    })
    ct.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="http://img07.tooopen.com/images/20170620/tooopen_sy_214579652271.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="http://img06.tooopen.com/images/20161022/tooopen_sy_182719487645.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="http://img06.tooopen.com/images/20170111/tooopen_sy_196580168948.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview">33</div>
<script>
var ct = document.querySelector('.ct'),
preimg = document.createElement('img'),
preview = document.querySelector('.img-preview');
ct.addEventListener('mouseover',function(e){
var imgsrc = e.target.getAttribute('data-img')
preimg.setAttribute('src', imgsrc)
preview.appendChild(preimg)
})
</script>```