事件模型、事件冒泡、事件捕獲、事件代理、阻止默認(rèn)事件、事件兼容等

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

• 添加多個事件處理程序區(qū)別：
  Dom2級：可以添加多個事件處理程序
  Dom0級：為一個事件添加多個事件處理程序時(shí)，后面的程序會覆蓋前面的。
• 是否可選事件模型
  Dom2級：可以選擇是在捕獲階段（true）和冒泡階段（false）
  Dom0級：只能在冒泡階段
• 刪除綁定在元素上的事件處理程序

Dom2級：removeEventListener()

var btn=document.querySelector("#btn");
var handler=function(){
    alert(this.id);
}

btn.addEventListener("click",handler,false);// 指定事件處理程序
btn.removeEventListener("click",handler,false);// 刪除事件處理程序

Dom0級：將事件處理程序設(shè)置為null

var btn=document.querySelector("#btn");
btn.onclick=function () {
    alert(this.id);
}// 添加事件處理程序

btn.onclick=null;// 刪除事件處理程序

題目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)運(yùn)行，this是window，所以剛才例子才會返回undefined，而不是元素id

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

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

IE事件冒泡：事件開始時(shí)由最具體的元素接收，然后逐級向上傳播到較為不具體的元素，如上圖一中所示，如果是一個點(diǎn)擊事件，當(dāng)點(diǎn)擊div時(shí)，是一層一層的向父級元素傳遞

DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段，處于目標(biāo)階段，事件冒泡階段，首先發(fā)生的是事件捕獲，為截取事件提供機(jī)會，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段

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

• 支持DOM2瀏覽器
  阻止冒泡e.stopPropagation();
  阻止默認(rèn)事件event.preventDefault()

• IE瀏覽器
  阻止冒泡e.cancelBubble = true;
  阻止默認(rèn)事件event.returnValue = false;

阻止事件冒泡
function stopPropagation(event){
    if(event.stopPropagation){
        event.stopPropagation()
    }
    else{
        event.cancelBubble = true;
    }

}


阻止默認(rèn)事件
function  preventDefault(event){
    if(event.preventDefault){
        event.preventDefault()
    }
    else{
        e.returnValue = false;
    }
}

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

<ul class="ct">
    <li>這里是</li>
    <li>饑人谷</li>
    <li>前端6班</li>
</ul>
<script>
var ct=document.querySelector('.ct');
ct.addEventListener('click',showText);//將事件監(jiān)聽放在父級元素
function showText(event){
    console.log(event.target.innerText);
}
</script> 

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

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

ct.addEventListener('click',showText);
addStart.addEventListener('click',addBefore);
addEnd.addEventListener('click',addAfter);

function showText(event){
    console.log(event.target.innerText);
}
function addBefore(){
    if(!ipt.value){
        alert('Please fill in the contents in the input box');
        return;
    };
    var li=document.createElement('li');
    li.innerText=ipt.value;
    ct.insertBefore(li,ct.firstChild);
}
function addAfter(){
    if(!ipt.value){
        alert('Please fill in the contents in the input box');
        return;
    };
    var li=document.createElement('li');
    li.innerText=ipt.value;
    ct.appendChild(li);
}

</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://a.hiphotos.baidu.com/zhidao/pic/item/1b4c510fd9f9d72aa05bac6cd22a2834349bbb80.jpg">鼠標(biāo)放置查看圖片1</li>
    <li data-img="http://www.qqleju.com/uploads/allimg/140326/26-045728_826.jpg">鼠標(biāo)放置查看圖片2</li>
    <li data-img="http://img1.3lian.com/2015/w2/12/d/83.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>

var ct = document.querySelector('.ct');
var preview = document.querySelector('.img-preview');

ct.addEventListener('mouseover',eventOver);
ct.addEventListener('mouseout',eventOut);
  
function eventOver(e){
    var img = e.target.getAttribute('data-img');
    preview.innerHTML =  '<img src = "' + img + '">';
}
function eventOut(e){
     preview.innerHTML = '';
}
</script>

題目8： 在 github 上創(chuàng)建個人項(xiàng)目，把視頻里事件兼容的函數(shù)寫法放入項(xiàng)目，在 Readme.md里描述項(xiàng)目(選做題目)

<script>
//綁定事件
    function  bindEvent(node,type,handler){
        if(node.addEventListener){
            node.addEventListener(type,handler);
        }
        else{
            node.attachEvent('on'+type,handler);
        }
    }
//解除事件
    function removeEvent(node,type,handler){
        if(node.removeEventListener){
            node.removeEventListener(type,handler);
        }
        else{
            node.detachEvent('on'+type,handler);
        }
    }
//獲取target
    function getTarget(e){
        return e.target || e.srcElement;
    }

</script>