一仿村、 DOM0 事件和DOM2級(jí)在事件監(jiān)聽(tīng)使用方式上有什么區(qū)別码撰？
javascrippt中DOM0事件是直接寫(xiě)在html里的事件较性，比如
<input onclick=alert('1')/>
DOM2事件是通過(guò)addEventListener（IE低版本是通過(guò)attachEvent）綁定的 ,比如

var btn=document.querySelector('#btn');
btn.addEventListener('事件類(lèi)型',函數(shù)名)呵晚；

二者的區(qū)別主要是：
1瘩欺、DOM0在HTML中書(shū)寫(xiě)很方便必盖，但是存在兩個(gè)缺點(diǎn)：
存在加載順序問(wèn)題，如果事件處理程序再html代碼之后加載俱饿，用戶(hù)可能在事件處理程序還未完成時(shí)就點(diǎn)擊按鈕之類(lèi)的觸發(fā)事件歌粥，存在時(shí)間差問(wèn)題。
這樣書(shū)寫(xiě)拍埠，html代碼和js代碼緊密耦合失驶，維護(hù)不方便。
二枣购、 attachEvent與addEventListener的區(qū)別嬉探？
attachEvent與addEventListener二者都是DOM2事件中的，通常會(huì)被t通同時(shí)應(yīng)用于兼容不同版本的瀏覽器棉圈。

attachEvent兼容性.png

addEventListener兼容性.png

二者的區(qū)別是：
1涩堤、addEventListener()接受三個(gè)參數(shù)，第一個(gè)是要處理程序的事件類(lèi)型分瘾，這個(gè)事件類(lèi)型（事件名稱(chēng)）是字符串胎围，但是不包括用于設(shè)置事件處理程序?qū)傩缘那熬Y"on"，第二個(gè)參數(shù)是指定類(lèi)型的事件發(fā)生時(shí)應(yīng)該調(diào)用的函數(shù)德召。最后一個(gè)參數(shù)是布爾值白魂，通常情況下這個(gè)參數(shù)會(huì)傳遞false，事件發(fā)生在冒泡階段上岗，如果為true則事件發(fā)生再捕獲階段
2福荸、而attachEvent()在IE事件模型下不支持事件捕獲，所以只有兩個(gè)參數(shù)：事件類(lèi)型和處理程序函數(shù)肴掷，且事件類(lèi)型使用的是帶"on"前綴的事件處理程序?qū)傩悦?br> 3敬锐、addEventListener()對(duì)于相同的事件只會(huì)注冊(cè)一次辞嗡，即使多次的寫(xiě)了注冊(cè)函數(shù)也只會(huì)成功注冊(cè)一個(gè)，而attachEvent()允許將相同的事件處理函數(shù)注冊(cè)多次滞造。當(dāng)特定的事件類(lèi)型發(fā)生時(shí)续室，注冊(cè)函數(shù)的調(diào)用次數(shù)和注冊(cè)次數(shù)一樣。
4谒养、事件處理程序的作用域不相同挺狰，addEventListener的作用域是元素本身，this是指的觸發(fā)元素买窟，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行丰泊，this是window
5、為一個(gè)事件添加多個(gè)事件處理程序時(shí)始绍，執(zhí)行順序不同瞳购，addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加多個(gè)事件處理程序時(shí)順序無(wú)規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的亏推，但是添加的多了就無(wú)規(guī)律了)学赛。
三、解釋IE事件冒泡和DOM2事件傳播機(jī)制吞杭？
當(dāng)事件發(fā)生在某個(gè)文檔節(jié)點(diǎn)時(shí)盏浇，目標(biāo)的事件處理程序就會(huì)被觸發(fā)，此外目標(biāo)的每個(gè)父節(jié)點(diǎn)也有機(jī)會(huì)處理該事件芽狗。
IE事件冒泡：事件開(kāi)始由最具體的元素接收绢掰，然后逐級(jí)向上傳播到不具體的元素。沒(méi)有捕獲階段童擎，只有目標(biāo)階段和事件冒泡階段滴劲。
DOM2事件傳播機(jī)制：DOM2事件規(guī)定事件流包括三個(gè)階段，事件捕獲階段顾复、處于目標(biāo)階段班挖、事件冒泡階段，首先發(fā)生的是事件捕獲捕透，為截取事件提供機(jī)會(huì)聪姿，然后是實(shí)際目標(biāo)接收事件，最后是冒泡階段乙嘀。

四末购、如何阻止事件冒泡？ 如何阻止默認(rèn)事件虎谢？
非IE瀏覽器中提供了一個(gè)事件對(duì)象 stopPropagation,可以阻止冒泡盟榴，IE瀏覽器提供了cancelBubble事件對(duì)象可以阻止冒泡，
在IE瀏覽器中通過(guò)returnvalue=false;阻止默認(rèn)事件婴噩；非IE瀏覽器通過(guò)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){
    if (e.target.tagName.toLowerCase()==='li') {
console.log(e.target.innerText);
    }
    
})
</script>

Paste_Image.png

六迅办、 補(bǔ)全代碼宅静，要求：

當(dāng)點(diǎn)擊按鈕開(kāi)頭添加時(shí)在<li>這里是</li>元素前添加一個(gè)新元素，內(nèi)容為用戶(hù)輸入的非空字符串站欺；當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個(gè) li 元素后添加用戶(hù)輸入的非空字符串.
當(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=document.querySelector('.ct');
var iptAddContent=document.querySelector('.ipt-add-content');
var btnAddStar=document.querySelector('#btn-add-start');
var btnAddEnd=document.querySelector('#btn-add-end');
btnAddStar.addEventListener('click',function(){
    var li=document.createElement('li');
    if (iptAddContent.value) {
        li.innerText=iptAddContent.value;
    };
    ct.insertBefore(li,ct.firstChild);
})

 btnAddEnd.addEventListener('click',function(){
    var li=document.createElement('li');
    if (iptAddContent.value) {
        li.innerText=iptAddContent.value;
    };
    ct.appendChild(li);
})
 ct.addEventListener('click',function(e){
    if (e.target.tagName.toLowerCase()==='li') {
console.log(e.target.innerText);
    }})
</script>

Paste_Image.png

七、 補(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=document.querySelector('.ct');
var imgPreview=document.querySelector('.img-preview');
ct.addEventListener('mouseover',function(e){
    if (e.target.tagName.toLowerCase()==='li') {
        var dateImg=e.target.getAttribute('data-img');
        imgPreview.innerHTML='![](dateImg)';
    }
})

</script>

Paste_Image.png

八贾虽、 在 github 上創(chuàng)建個(gè)人項(xiàng)目逃糟，把視頻里事件兼容的函數(shù)寫(xiě)法放入項(xiàng)目，在 Readme.md里描述項(xiàng)目(選做題目)
由于網(wǎng)絡(luò)過(guò)于慢蓬豁，而且git上東西較多绰咽，長(zhǎng)時(shí)間未更新，一直下不下來(lái)庆尘，我就在這截圖吧

Paste_Image.png

Paste_Image.png

Paste_Image.png