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

Dom0添加同一個事件只能添加一次，多次添加時后面的會覆蓋前面的，事件在冒泡階段執(zhí)行；
Dom2級可以給同一個事件添加多個事件處理程序，按順序執(zhí)行，事件接收參數(shù)控制事件是在冒泡順序還是捕獲順序，true是捕獲階段，false是在冒泡階段。

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

1.attachEvent接收兩個參數(shù)，一個參數(shù)是事件處理函數(shù)，在參數(shù)前加'on',事件處理程序在冒泡階段；addEventlistener有三個參數(shù)，第一個參數(shù)是事件類型，第三個參數(shù)決定在哪個階段，true在捕獲階段，false在冒泡階段。

2.事件處理程序作用域不同，attachEvent事件處理函數(shù)的作用域是全局作用域，this等于window;addEventlistener事件處理函數(shù)作用域是元素作用域

3.為一個事件添加多個事件處理程序時，執(zhí)行順序不同，attachEvent執(zhí)行順序無規(guī)律；addEventlistener是按順序執(zhí)行

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

IE事件冒泡：事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的元素
<img src="http://upload-images.jianshu.io/upload_images/5615113-26040b08477ac77d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >

DOM2事件傳播機(jī)制
DOM2事件傳播包括三個階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，當(dāng)點(diǎn)擊時，先從最外層向內(nèi)層傳遞，到了目標(biāo)后再從內(nèi)層向外層傳遞，整個流程如下圖

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

e.stopPropagation()可以阻止冒泡

<div class="ct">
 <div class="box"></div>
</div>

   var ct = document.querySelector('.ct')
   var box = document.querySelector('.box')
   ct.addEventListener('click',function() {
       console.log('ct')
   })
   box.addEventListener('click',function(e){
       console.log('box')
        e.stopPropagation()  //點(diǎn)擊box時不會向上傳遞
   })

preventDefault()方法可以阻止默認(rèn)行為，比如阻止鏈接跳轉(zhuǎn)

document.getElementsByTagName('a').onclick = function (e) {
    e.preventDefault();
}

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

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
    // var liNodes = document.querySelectorAll('li');
    //liNodes.forEach(function(value){
    //    value.addEventListener('click',function(){
     // console.log(this.innerText)
       // })
     //})

    var ctNodes = document.querySelector('.ct')
    ctNodes.addEventListener('click',function(e) {
        var target = e.target
        if (target.tagName.toLowerCase() === 'li') {
        console.log(target.innerText)
        }
    })
</script>

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

• 當(dāng)點(diǎn)擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素，內(nèi)容為用戶輸入的非空字符串；當(dāng)點(diǎn)擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
• 當(dāng)點(diǎn)擊每一個元素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 btnStart = document.querySelector('#btn-add-start');
    var btnEnd = document.querySelector('#btn-add-end');
    var addInp = document.querySelector('.ipt-add-content');
    var ctNodes = document.querySelector('.ct')

    btnStart.addEventListener('click',function(){
        if (!addInp.value) {
                alert('請輸入內(nèi)容！')
        }else {
        var newLi = document.createElement('li')
        newLi.innerText = addInp.value
        console.log(newLi)
        ctNodes.insertBefore(newLi,ctNodes.firstChild)
        }   
    })

    btnEnd.addEventListener('click',function(){
        if (!addInp.value) {
                alert('請輸入內(nèi)容！')
        }else {
        var newLi = document.createElement('li')
        newLi.innerText = addInp.value
        ctNodes.appendChild(newLi)
        }   
    })

    ctNodes.addEventListener('click',function(e) {
        var target = e.target;
        console.log(target.innerText)
    })
</script>

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

<ul class="ct">
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
    var ctNodes = document.querySelector('.ct');
    var imgPreview = document.querySelector('.img-preview')
    ctNodes.addEventListener('mouseover',function(e){
        var target = e.target
        console.log(target)
        var dataImg = target.getAttribute('data-img')
        imgPreview.innerHTML = '![]( '+ dataImg +' )'
    })
</script>