DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別情萤？
- DOM0級事件就是將一個函數(shù)賦值給一個事件處理程序?qū)傩匝纪堋Ｒ赃@種方式添加的事件處理程序會在時間流的冒泡階段被處理，一個事件只能綁定一次筋岛，并且新方法會覆蓋老方法娶视。可以通過將事件處理屬性賦值為null來刪除時間處理程序泉蝌，如
btn.onclick = null歇万。（在IE中，雖然this仍指向當前元素勋陪，但event對象卻作為window對象的一個屬性存在） - DOM2級事件定義了兩個方法贪磺，用于指定和刪除事件處理程序：addEventListener()和removeEventListener()。都接收三個參數(shù)：要處理的事件名诅愚、作為事件處理程序的函數(shù)和一個布爾值（true表示在捕獲階段調(diào)用事件處理程序寒锚，false表示在冒泡階段調(diào)用事件處理程序）详恼。添加的匿名函數(shù)將無法被移除呵哨。
attachEvent與addEventListener的區(qū)別？
- 參數(shù)不同屿愚。addEventListener有三個參數(shù)雌桑，attachEvent只有兩個喇喉，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段，addEventListener第三個參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 第一個參數(shù)意義不同校坑，addEventListener第一個參數(shù)是事件類型（比如click拣技，load），而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱（onclick耍目，onload）
- 事件處理程序的作用域不相同膏斤，addEventListener的作用域是元素本身，this是指的綁定元素邪驮，而attachEvent事件處理程序會在全局作用域內(nèi)運行莫辨，this是window。
- 為一個事件添加多個事件處理程序時毅访，執(zhí)行的順序不同沮榜。 addEventListener 會按照添加的順序執(zhí)行。 attachEvent是以相反的順序被觸發(fā)喻粹。
解釋IE事件冒泡和DOM2事件傳播機制敞映？
- IE事件冒泡：事件由目標元素接收，然后逐級向上傳播到到最不具體的元素
- DOM2事件傳播：總共可以分為三個階段：事件捕獲階段磷斧、目標階段和事件冒泡階段；首先發(fā)生的是事件捕獲，為截獲事件提供機會弛饭，然后是實際目標接收事件冕末，最后是事件冒泡階段
如何阻止事件冒泡？ 如何阻止默認事件侣颂？
- 如果使用的是DOM中的事件對象档桃，通過調(diào)用event對象的stopPropagation()函數(shù)來阻止事件的進一步捕獲或冒泡，通過preventDefault()取消事件的默認行為憔晒。
- 如果使用的是IE中的事件對象藻肄，通過將event對象的cancelBubble屬性設(shè)置為true來阻止冒泡，通過將returnValue屬性設(shè)置為false取消默認事件拒担。
有如下代碼嘹屯，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var items = document.querySelectorAll('.ct')[0];
items.addEventListener('click', function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
});
</script>
補全代碼从撼，要求：
- 當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素州弟，內(nèi)容為用戶輸入的非空字符串；當點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
- 當點擊每一個元素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>
var items = document.querySelectorAll('.ct')[0],
iptAddContent = document.querySelectorAll('.ipt-add-content')[0];
btnAddStart = document.querySelector('#btn-add-start'),
btnAddEnd = document.querySelector('#btn-add-end'),
items.addEventListener('click', function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
});
btnAddStart.addEventListener('click', function() {
if (iptAddContent.value) {
var item = document.createElement('li');
item.innerText = iptAddContent.value;
items.insertBefore(item, items.firstChild);
}
});
btnAddEnd.addEventListener('click', function() {
if (iptAddContent.value) {
var item = document.createElement('li');
item.innerText = iptAddContent.value;
items.appendChild(item);
}
});
</script>
補全代碼婆翔，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應(yīng)的圖片掏婶。
<ul class="ct">
<li data-img="http://upload.jianshu.io/users/upload_avatars/5074174/cdd4062f-f79b-4af1-885d-a4fc1ad2c5f7?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120">鼠標放置查看圖片1</li>
<li data-img="http://upload-images.jianshu.io/upload_images/2929044-ef6c1b3f1128e934.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/375/h/300">鼠標放置查看圖片2</li>
<li data-img="http://upload-images.jianshu.io/upload_images/2283534-1d7d98df0854bbf9.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/375/h/300">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var items = document.querySelectorAll('.ct')[0],
imgPreview = document.querySelectorAll('.img-preview')[0],
image = document.createElement('img');
imgPreview.appendChild(image);
items.addEventListener('mouseover', function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
image.src = e.target.getAttribute('data-img');
}
});
items.addEventListener('mouseout', function(e) {
image.src = '';
})
</script>
1
1
1
1
1
1
1
1
1
