1- DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上的區(qū)別

• DOM0：把一個(gè)方法賦值給一個(gè)元素的事件處理程序?qū)傩运晏郏@樣處理些己，事件處理程序被認(rèn)為是元素的方法，事件處理程序在元素的作用域下運(yùn)行，this就是當(dāng)前元素枝恋。這樣的缺陷是：同一個(gè)事件只能有一個(gè)事件監(jiān)聽函數(shù)，再次添加會(huì)產(chǎn)生覆蓋三热。

var btnClick = document.getElementById('btnClick');
btnClick.onclick = function handler() {
    alert(this.id);
}; //bthClick

• DOM2：這種方式可以給一個(gè)同一個(gè)元素添加多個(gè)處理事件鼓择，同時(shí)它的this也指向元素本身。

var btnClick = document.getElementById('btnClick');
btnClick.addEventListener('click', function() {
    alert(this.id);
}, false); //btnClick

2- attachEvent與addEventListener的區(qū)別

• 適用瀏覽器不同：attachEvent是IE的事件處理方法就漾，addEventListener是標(biāo)準(zhǔn)瀏覽器的處理方式呐能。
• 參數(shù)個(gè)數(shù)不相同：addEventListener有三個(gè)參數(shù)，attachEvent只有兩個(gè)抑堡，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段摆出，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理。
• 第一個(gè)參數(shù)意義不同：addEventListener第一個(gè)參數(shù)是事件類型（比如click首妖，load）偎漫，而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick，onload）有缆。
• 事件處理程序的作用域不相同：addEventListener的作用域是元素本身象踊，this是指的觸發(fā)元素，而attachEvent事件處理程序會(huì)在全局變量內(nèi)運(yùn)行棚壁，this是window杯矩。
• 為一個(gè)事件添加多個(gè)事件處理程序時(shí)，執(zhí)行順序不同：addEventListener添加會(huì)按照添加順序執(zhí)行袖外，而attachEvent添加多個(gè)事件處理程序時(shí)順序無規(guī)律史隆。

3- IE事件冒泡和DOM2事件傳播機(jī)制

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

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

• DOM瀏覽器：
  • 阻止事件冒泡：stopPropagation()
  • 阻止默認(rèn)事件：preventDefault()
• IE瀏覽器：
  • 阻止事件冒泡：cancelBubble 默認(rèn)為false咙轩，設(shè)置為true后可以取消事件冒泡
  • 阻止默認(rèn)事件：returnValue 默認(rèn)為true，設(shè)為false可以取消事件默認(rèn)行為

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

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

• 可參考
  結(jié)果：

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端9班</li>
</ul>
<script>
var lis = document.querySelectorAll('.ct li');
for(var i = 0; i < lis.length; i++){
    lis[i].addEventListener('click', function(){
        console.log(this.innerText);
    })
}
</script>

• 預(yù)覽

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>
//你的代碼
</script>

• 可參考
  結(jié)果：

<div>
    <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>
</div>
<script>
    var ul = document.querySelector(".ct");
    var btn_add_start = document.querySelector("#btn-add-start");
    var btn_add_end = document.querySelector("#btn-add-end");
    var content = document.querySelector(".ipt-add-content");
    btn_add_start.onclick = function (event) {
        if(content.value.length < 1 ){
            alert('請(qǐng)輸入項(xiàng)目名稱');
        }else{
            var newNode = document.createElement("li");
            newNode.innerHTML = content.value;
            ul.insertBefore(newNode, ul.firstElementChild);
            content.value = "";
        }
    }
    btn_add_end.onclick = function (event) {
        if(content.value.length < 1 ){
            alert('請(qǐng)輸入項(xiàng)目名稱');
        }else{
            var newNode = document.createElement("li");
            newNode.innerHTML = content.value;
            ul.appendChild(newNode);
            content.value = "";
        }
    }
    function outputInnerText(event){
        var target = event.target;
        console.log(target.innerHTML);
    }
    ul.addEventListener("click", outputInnerText);
</script>

• 預(yù)覽

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="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>
//你的代碼
</script>

• 可參考
  結(jié)果：

<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 preview = document.querySelector('.img-preview');
var ct = document.querySelector('.ct');
ct.addEventListener('mouseover', function(e){
  if(e.target.tagName.toLowerCase() === 'li'){
  var img = document.createElement('img');
  img.src = e.target.getAttribute('data-img');
  preview.appendChild(img); 
  }
})
ct.addEventListener('mouseout', function(e){
  if(e.target.tagName.toLowerCase() === 'li'){
  preview.innerHTML = '';
  }
});
</script>

• 預(yù)覽

- 其他參考資料：event事件