1胜宇、DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0：onclick 只能綁定一個事件亮隙，綁定多個會產(chǎn)生覆蓋；不能設(shè)置參數(shù)垢夹，使用默認(rèn)的事件冒泡階段溢吻。
- DOM2：addEventListener中有第3個參數(shù)，attachEvent沒有果元。第3個參數(shù)傳遞的是false或true促王。這個參數(shù)可選，默認(rèn)是false而晒。
false--表示事件處理將在冒泡階段執(zhí)行蝇狼。
true--表示事件處理將在捕獲階段執(zhí)行。 - 理論上倡怎，Event Listeners (addEventListener题翰、attachEvent（IE使用 ）)可以無限增加事件監(jiān)聽給某個一元素。實(shí)際應(yīng)用的約束就是客戶端內(nèi)存的限制诈胜，這一點(diǎn)因每個瀏覽器而異豹障。
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尔许。
- 為一個事件添加多個事件處理程序時么鹤，執(zhí)行的順序不同。 addEventListener 會按照添加的順序執(zhí)行味廊。 attachEvent 添加多個事件處理程序時蒸甜，順序是無規(guī)律的棠耕。
3、 解釋IE事件冒泡和DOM2事件傳播機(jī)制柠新？
當(dāng)事件發(fā)生在某個文檔節(jié)點(diǎn)上時（即事件目標(biāo)）昧辽，目標(biāo)的事件處理程序就會被觸發(fā)。此外目標(biāo)的每個祖先節(jié)點(diǎn)也有機(jī)會處理該事件登颓。
- 2級DOM的事件傳播包含三個階段:
捕捉階段（capturing）搅荞，事件從頂級文檔樹節(jié)點(diǎn)一級一級向下遍歷，直到到達(dá)該事件的目標(biāo)節(jié)點(diǎn)框咙。
到達(dá)事件的目標(biāo)節(jié)點(diǎn)咕痛，執(zhí)行目標(biāo)節(jié)點(diǎn)的時間處理程序。
事件起泡（bubbling）喇嘱，事件從目標(biāo)節(jié)點(diǎn)一級一級向上上溯茉贡，直到頂級文檔樹節(jié)點(diǎn)。 - 相應(yīng)的者铜，2級DOM通過下面的兩個函數(shù)給節(jié)點(diǎn)對象添加和刪除事件處理函數(shù)腔丧。
addEventListener(eventType, handler, propagate);
removeEventListener(eventType, handler, propagate);
三個參數(shù)意思分別如下:
eventType: 即事件類型（不加on）。比如："click"作烟。
handler: 事件處理函數(shù)愉粤。傳入?yún)?shù)即為事件對象event。
propagate: 是否只執(zhí)行捕獲和目標(biāo)節(jié)點(diǎn)兩個階段拿撩。true的話衣厘，只執(zhí)行1，2兩個階段压恒；false的話影暴，只指向2，3兩個階段探赫。 - IE的事件傳播只包含上邊的2和3兩個階段
相應(yīng)的型宙，IE通過下面兩個函數(shù)給節(jié)點(diǎn)對象添加和刪除事件處理函數(shù)。
attachEvent(eventType, handler);
detachEvent(eventType, handler);
參數(shù)意思同2級DOM對應(yīng)的函數(shù)參數(shù)
4伦吠、如何阻止事件冒泡妆兑？ 如何阻止默認(rèn)事件？
- DOM瀏覽器
阻止冒泡e.stopPropagation();
阻止默認(rèn)事件event.preventDefault() - IE瀏覽器
阻止冒泡e.cancelBubble = true;
阻止默認(rèn)事件event.returnValue = false; - 使用 onmouseenter讨勤、onmouseleave等事件默認(rèn)阻止冒泡
5箭跳、有如下代碼晨另，要求當(dāng)點(diǎn)擊每一個元素li時控制臺展示該元素的文本內(nèi)容潭千。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
方法一（利用閉包）：http://js.jirengu.com/kidog/1/edit?html,js,console,output
方法二（利用 this）：http://js.jirengu.com/tehuq/1/edit?js,console,output
6、 補(bǔ)全代碼借尿，要求：
- 當(dāng)點(diǎn)擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素刨晴，內(nèi)容為用戶輸入的非空字符串屉来；當(dāng)點(diǎn)擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
- 當(dāng)點(diǎn)擊每一個元素li時控制臺展示該元素的文本內(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>
<script>
var ct=document.getElementsByClassName('ct')[0]
var addS=document.getElementById('btn-add-start')
var addE=document.getElementById('btn-add-end')
var lis=ct.getElementsByTagName('li')
function getEvent(){
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
console.log(this.innerHTML)
}
}
}
getEvent()
addS.onclick=function(){
var ipt=document.getElementsByTagName('input')[0]
if (ipt.value.replace(/(^s*)|(s*$)/g, "").length ==0)
{console.log('不能為空');return}
var newLi=document.createElement('li')
newLi.innerHTML=ipt.value
ct.insertBefore(newLi,ct.firstChild)
lis=ct.getElementsByTagName('li')
getEvent()
}
addE.onclick=function(){
var ipt=document.getElementsByTagName('input')[0]
if (ipt.value.replace(/(^s*)|(s*$)/g, "").length ==0)
{console.log('不能為空');return}
var newLi=document.createElement('li')
newLi.innerHTML=ipt.value
ct.appendChild(newLi)
lis=ct.getElementsByTagName('li')
getEvent()
}
</script>
預(yù)覽地址：http://js.jirengu.com/zacam/1/edit?html,js,console,output
7狈癞、 補(bǔ)全代碼茄靠，要求：當(dāng)鼠標(biāo)放置在li元素上，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(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>
<script>
var lis=document.getElementsByTagName('li')
var ct=document.getElementsByClassName('img-preview')[0]
var img1=document.createElement('img')
ct.appendChild(img1)
for(var i=0;i<lis.length;i++){
lis[i].onmouseover=function(){
img1.src=this.getAttribute('data-img')
}
}
</script>
預(yù)覽鏈接：http://js.jirengu.com/bagix/2/edit
方法二：利用事件代理
預(yù)覽鏈接：http://js.jirengu.com/duseb/3/edit?html,js,output
