1. DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別押袍？
- 添加方式
- DOM0級事件是通過內(nèi)聯(lián)方式
<div onclick="console.log()">...</div>或是在JS中寫onclick=function( ){ }函數(shù)進(jìn)行添加 - DOM2級事件通過
addEventListener來添加事件監(jiān)聽联四，接受三個參數(shù)：事件類型、事件處理方法仑濒、布爾值（true表示事件捕獲階段響應(yīng)叹话，false表示事件冒泡階段響應(yīng)，默認(rèn)false）墩瞳。例：btn.addEventListener('onclick',function( ){ },false)
- DOM0級事件是通過內(nèi)聯(lián)方式
- 刪除事件
- 刪除DOM0級方法制定的事件處理程序驼壶，將事件處理程序的值設(shè)置為null即可：
btn.onclick=null - 刪除DOM2級方法制定的事件處理程序：removeEventListener
但是該方法不能移除addEventListener添加的匿名函數(shù)
- 刪除DOM0級方法制定的事件處理程序驼壶，將事件處理程序的值設(shè)置為null即可：
btn.addEventListener('click',function(){console.log('hello')},false);
btn.removeEventListener('click',function(){console.log('hello')},false);//沒有效果
//使用這樣的寫法才行
function handle(){
console.log('hello')
}
var btn=document.querySelector('#btn');
btn.addEventListener('click',handle,false);
btn.removeEventListener('click',handle,false)
- 多個事件處理程序：DOM0不支持多個事件處理程序，后面的會覆蓋前面的喉酌，只能一個事件處理程序?qū)?yīng)一個函數(shù)热凹；DOM2級事件處理程序可以添加多個事件。
- this：DOM0級事件中
this對象指向全局對象瞭吃；DOM2級事件this指向Element節(jié)點 - DOM0級事件只能在冒泡階段進(jìn)行監(jiān)聽器觸發(fā)碌嘀；DOM2級事件可以通過參數(shù)選擇在冒泡階段或是捕獲階段進(jìn)行監(jiān)聽觸發(fā)
- 兼容性：DOM0級事件支持所有瀏覽器；DOM2級事件要求瀏覽器為IE8以上
2. attachEvent與addEventListener的區(qū)別
- 瀏覽器支持情況不同
IE9以下的瀏覽器不支持addEventListener - 參數(shù)個數(shù)不同
addEventListener有三個參數(shù)：type,handle,(true/false)
attachEvent只要兩個參數(shù)：type,handle
因為attachEvent監(jiān)聽的事件只能發(fā)生在冒泡階段歪架，所以為了兼容性股冗，addEventListener的第三個參數(shù)默認(rèn)為false - 第一個參數(shù)不同
addEventListener的第一個參數(shù)是方法，如click,scroll
attachEvent第一個參數(shù)是事件名稱和蚪，如onclick,onscroll - 事件處理程序的作用域不同
DOM2級事件中止状，addEventListener作用域在所屬的元素內(nèi)進(jìn)行，此時this指向這個元素
使用attach方式時攒霹，事件處理程序在全局作用域進(jìn)行怯疤，此時this指向window - 執(zhí)行順序不同
addEventListener會按照添加順序執(zhí)行
attachEvent添加多個時間處理程序時順序無規(guī)律（在IE9以下，添加方法較少時催束，各方法按添加順序的反順序進(jìn)行集峦，添加方法多時則亂序進(jìn)行）
3. 解釋IE事件冒泡和DOM2事件傳播機制
-
IE事件冒泡
傳播順序是由里到外，即時間開始時由最具體的元素抠刺，文檔中嵌套最深的那個節(jié)點接收塔淤，然后逐級向上傳播到window(document)
事件冒泡.png - DOM2事件傳播機制
分為三個階段：- 事件捕獲階段。即由最頂層元素（一般是從window元素開始速妖，有的瀏覽器是從document開始）開始高蜂，逐次進(jìn)入dom內(nèi)部，最后到達(dá)目標(biāo)元素罕容，依次執(zhí)行綁定在其上的事件
- 處于目標(biāo)階段备恤。檢測機制到達(dá)目標(biāo)元素稿饰，按事件注冊順序執(zhí)行綁定在目標(biāo)元素上的事件
-
時間冒泡階段。從目標(biāo)元素出發(fā)露泊，向外層元素冒泡喉镰，最后到達(dá)頂層（window或者document），依次執(zhí)行綁定在其上的事件
DOM2級事件.png
4. 如何阻止事件冒泡惭笑？如何阻止默認(rèn)事件
//阻止冒泡
function stopPropagation(e){
if (e&&e.stopPropagation){
e.stopPropagation();//W3C標(biāo)準(zhǔn)
}else{
window.event.cancelBubble=true;//IE瀏覽器
}
}
//阻止默認(rèn)事件
function preventDefault(e){
if (e&&e.preventDefault){
e.preventDefault()://W3C標(biāo)準(zhǔn)
}else{
window.event.returnValue=false;//IE瀏覽器
}
}
5. 有如下代碼梧喷，要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。不考慮兼容
3.png
var ct=document.querySelector('.ct');
ct.addEventListener('click',function(e){
if(e.target.tagName.toLowerCase()==='li'){
console.log(e.target.innerText)
}
})
6. 補全代碼
要求：
- 當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素脖咐，內(nèi)容為用戶輸入的非空字符串铺敌；當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
-
當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容。
4.png
<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>
function $(node) {
return document.querySelector(node);
}
var ct = $('.ct');
var ipt = $('.ipt-add-content');
var btnstart = $('#btn-add-start');
var btnend = $('#btn-add-end');
ct.addEventListener('click', function (e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
});
btnstart.addEventListener('click', function () {
var newNode = document.createElement('li');
if (ipt.value.length !== 0) {
newNode.innerText = ipt.value;
ct.insertBefore(newNode, ct.firstChild);
}
});
btnend.addEventListener('click', function () {
var newNode = document.createElement('li');
if (ipt.value.length !== 0) {
newNode.innerText = ipt.value;
ct.appendChild(newNode);
}
});
</script>
</script>
7. 補全代碼
要求：當(dāng)鼠標(biāo)放置在li元素上屁擅，會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片偿凭。
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
function $(node){
return document.querySelector(node);
}
var ct=$('.ct');
var preview=$('.img-preview');
var newImg=document.createElement('img');
ct.addEventListener('mouseover',function(e){
if(e.target.tagName.toLowerCase()==='li'){
newImg.src=e.target.getAttribute('data-img');
preview.appendChild(newImg);
}
});
</script>
