1. DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0級(jí)事件
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//do sth...
console.log(this); // myBtn
}
// 事件以'on'開頭辙浑，如onmouseover, onmouseout等
使用DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法身隐，此時(shí)事件處理程序是在元素的作用域里中運(yùn)行慈俯，所以此時(shí)this指向的是元素本身豪墅。而且這種添加方式的缺陷是纤泵，只能存在一個(gè)處理程序吮便，如果再次向同一個(gè)元素添加另外一個(gè)處理程序笔呀，上一個(gè)處理程序會(huì)被覆蓋。
- DOM2級(jí)事件
DOM2級(jí)別事件監(jiān)聽使用的方法為：
var btn = document.getElementById("myBtn");
btn.addEventListener("事件名", function(){
//do sth...
console.log(this); // myBtn
});
這樣的添加方式比起DOM0級(jí)更靈活髓需，它可以給一個(gè)同一個(gè)元素添加多個(gè)處理事件许师。同時(shí)它的this也同樣指向元素本身。
2.attachEvent與addEventListener的區(qū)別僚匆？
接收參數(shù)不同
attachEvent()接收兩個(gè)參數(shù)微渠，一個(gè)事件，一個(gè)事件的處理函數(shù)咧擂，且不支持事件捕獲敛助。
addEventLisner接受三個(gè)參數(shù)，一個(gè)事件屋确，一個(gè)事件的處理函數(shù)纳击，第三個(gè)參數(shù)是boolean,如果為false是事件冒泡，true攻臀，則為事件捕獲焕数。第三個(gè)參數(shù)可選，默認(rèn)值為false刨啸。第一個(gè)參數(shù)意義不同
attachEvent接受的第一個(gè)參數(shù)的意義是事件處理函數(shù)的名稱堡赔，而addEventListener指的是參數(shù)事件類型。只需在參數(shù)事件類型前加'on'就可以了设联。事件處理程序的作用域不同
addEventListener的作用域是元素本身善已，this是指的觸發(fā)元素灼捂，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window换团。為一個(gè)事件添加多個(gè)處理程序時(shí)悉稠，執(zhí)行順序不同
addEventListener添加會(huì)按照添加順序執(zhí)行，而attachEvent添加會(huì)往往按照反序執(zhí)行艘包，添加的多了就沒有規(guī)律而言的猛。
3.解釋IE事件冒泡和DOM2事件傳播機(jī)制？
- 事件冒泡
當(dāng)我們觸發(fā)某種事件想虎，首先會(huì)精準(zhǔn)判斷觸發(fā)事件的元素到底是哪一個(gè)具體的元素卦尊，然后再層層往上報(bào)，最終觸發(fā)到document舌厨。舉個(gè)例子來(lái)說(shuō).
<!DOCTYPE html>
<html>
<body>
<div>
<li>
<input>
</li>
</div>
</body>
</html>
假如給<input>綁定一個(gè)點(diǎn)擊事件岂却，首先input會(huì)監(jiān)聽到這個(gè)時(shí)間，觸發(fā)事件處理函數(shù)裙椭，然后再往上報(bào)淌友，也會(huì)觸發(fā)<li>的點(diǎn)擊處理函數(shù)，再往上報(bào)骇陈，依次類推。
- DOM2級(jí)事件處理程序
分為三個(gè)階段瑰抵，第一個(gè)階段你雌，事件捕獲，由window-html-body-父-子二汛。這一階段為截取事件提供了機(jī)會(huì)婿崭。
第二個(gè)階段，目標(biāo)階段肴颊，傳遞到目標(biāo)氓栈，
第三階段，冒泡階段婿着，再倒序的傳
4.如何阻止事件冒泡授瘦？ 如何阻止默認(rèn)事件？
- 阻止事件冒泡
用stopPropagation()方法可以停止事件在DOM層次的傳播竟宋，即取消進(jìn)一步事件的捕獲或者冒泡提完。 - 阻止默認(rèn)事件
用preventDefault()阻止默認(rèn)事件。
5.有如下代碼丘侠，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容徒欣。不考慮兼容
http://js.jirengu.com/gahudaguni/1/edit?html
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)容脂新。
代碼一：http://js.jirengu.com/noloholona/1/
代碼二 http://js.jirengu.com/kayufuboxa/1/
7.補(bǔ)全代碼，要求：當(dāng)鼠標(biāo)放置在li元素上粗梭，會(huì)在img-preview里展示當(dāng)前l(fā)i元素的data-img對(duì)應(yīng)的圖片
代碼一：http://js.jirengu.com/hataqefuca/1/
代碼二：http://js.jirengu.com/veyedudaqe/1/
