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

var box = getElementIdBy('div');
box.onclick = function(){
  console.log(this);
}//DOM0事件監(jiān)聽(tīng)方式（只能給元素綁定一個(gè)事件）

box.addEventListener('click',function(){
  console.log(this);
})//DOM2事件監(jiān)聽(tīng)方式（可以給元素綁定多個(gè)事件）

attachEvent與addEventListener的區(qū)別？

1. IE8.0以下不支持addEventListener，而是使用attachEvent方法
2. 由于IE只支持冒泡事件，所以attachEvent添加的事件會(huì)被添加到冒泡階段。
3. attachEvent的事件名前面要加上on如onclick，addEventListener則去掉了on。
4. 在attachEvent的事件處理程序中，它的作用域是全局作用域，this等于window； 而在addEventListener里事件處理程序的作用域是元素的作用域，this等于元素本身。

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

• IE事件冒泡：事件開(kāi)始時(shí)由最具體的元素接收，然后逐級(jí)向上傳播到較為不具體的元素
• DOM事件流：DOM2級(jí)事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會(huì)，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段。

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

stopPropgation();//取消事件進(jìn)一步捕獲或者冒泡
preventDefault();//取消事件默認(rèn)行為

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

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

補(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>這里是</li>
    <li>饑人谷</li>
    <li>任務(wù)班</li>
</ul>
<input class="ipt-add-content" placeholder="添加內(nèi)容"/>
<button id="btn-add-start">開(kāi)頭添加</button>
<button id="btn-add-end">結(jié)尾添加</button>
<script>
    var ct = $('.ct'),
        start = $('#btn-add-start'),
        end = $('#btn-add-end'),
        firstLi = $('.ct>li')
        input = $('.ipt-add-content');
    ct.addEventListener('click',function(e){
        console.log(e.target.innerText);
    })
    start.addEventListener('click',function(){
        var li = document.createElement('li');
        li.innerText = input.value;
        ct.insertBefore(li,firstLi);

    })
    end.addEventListener('click',function(){
        var li = document.createElement('li');
        li.innerText = input.value;
        ct.appendChild(li);
    })
    function $(element){
        return document.querySelector(element);
    }
</script>

補(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="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 ct = $('.ct'),
        imgPreview = $('.img-preview'),
        img = document.createElement('img');
    ct.addEventListener('mouseover',function(e){
        if(e.target.tagName === 'LI'){
            imgPreview.appendChild(img);
            img.src = e.target.getAttribute('data-img');
        }
    })
//    ct.addEventListener('mouseout',function(){
//        imgPreview.removeChild(img);
//    })
    function $(element){
        return document.querySelector(element);
    }
</script>