題目1： DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別？
- DOM0級(jí)方法指定的事件處理程序被認(rèn)為是元素的方法，就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩裕總€(gè)元素包括window和document都有自己處理程序的屬性）蛤吓。例如：onclick、onmouseover、onmouseout等菲驴。因此，這時(shí)候的事件處理程序是在元素的作用域中執(zhí)行的骑冗；例如DOM0級(jí)綁定事件的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div1">點(diǎn)我</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('div1');
btn.onclick = function(event){
console.log(event);
console.log(this.id); //div1
console.log(this.innerHTML);//點(diǎn)我
}
</script>
</html>
刪除事件的方法是：
btn.onclick = null;
- ’DOM2級(jí)事件’定義了兩個(gè)方法赊瞬，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener();所有的DOM節(jié)點(diǎn)都包含這兩種方法。
它們都接受3個(gè)參數(shù)：要處理的事件名贼涩，事件處理程序的函數(shù)巧涧，和一個(gè)布爾值。 最后一個(gè)參數(shù)：如果為true遥倦，表示在捕獲階段調(diào)用事件處理程序谤绳，如果是false，表示在冒泡階段調(diào)用事件處理程序袒哥。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="div2">你可以改變世界缩筛！</div>
</body>
<script type="text/javascript">
var btn2 = document.getElementById('div2');
btn2.addEventListener('click', function(e){
console.log(e);
console.log(this);
console.log(this.innerHTML);//你可以改變世界！
}, false);
</script>
</html>
然后我們?cè)俳obtn2添加一個(gè)事件：
btn2.addEventListener('click', function(e){
console.log(this.id) //div2
}, false);
最后我們會(huì)看到堡称，當(dāng)點(diǎn)擊div的時(shí)候歪脏，這兩個(gè)事件都會(huì)發(fā)生，這就是DOM2級(jí)事件處理程序比DOM0級(jí)好的地方(DOM0級(jí)只能覆蓋粮呢，不會(huì)連續(xù)觸發(fā)婿失！)钞艇。
??我們通過(guò)addEventListener()添加事件處理程序的程序只能使用removeEventListener()來(lái)移除。豪硅，這也意味著哩照，通過(guò)addEventListener()添加的匿名函數(shù)無(wú)法移除：
接著以上的代碼：
btn2.removeEventListener('click',function(e){
console.log(this.id);
},false); //雖然調(diào)用了移除函數(shù)，但是事件并沒(méi)有移除
所以懒浮，我們必須使用這樣的寫法：
function handler(){
console.log('這次可以移除了飘弧！');
}
btn2.addEventListener('click',handler, false);
btn2.removeEventListener('click',handler,false);
題目2： attachEvent與addEventListener的區(qū)別？
- 參數(shù)個(gè)數(shù)不相同砚著，addEventListener有三個(gè)參數(shù)假残，attachEvent只有兩個(gè)，attachEvent添加的事件處理程序只能發(fā)生在冒泡階段痢毒，addEventListener第三個(gè)參數(shù)可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理（我們一般為了瀏覽器兼容性都設(shè)置為冒泡階段）
- 第一個(gè)參數(shù)意義不同米丘，addEventListener第一個(gè)參數(shù)是事件類型（比如click，load）舌镶，而attachEvent第一個(gè)參數(shù)指明的是事件處理函數(shù)名稱（onclick柱彻，onload）
- 事件處理程序的作用域不相同，addEventListener的作用域是元素本身餐胀，this是指的觸發(fā)元素哟楷，而attachEvent事件處理程序會(huì)在全局變量?jī)?nèi)運(yùn)行，this是window否灾，所以會(huì)返回undefined卖擅，而不是元素id。
- 為一個(gè)事件添加多個(gè)事件處理程序時(shí)墨技，執(zhí)行的順序不同磨镶。 addEventListener 會(huì)按照添加的順序執(zhí)行。 attachEvent 添加多個(gè)事件處理程序時(shí)健提，順序是無(wú)規(guī)律的琳猫。
題目3： 解釋IE事件冒泡和DOM2事件傳播機(jī)制？
- IE事件冒泡是事件執(zhí)行開始在具體元素私痹，逐級(jí)向上執(zhí)行
- DOM2事件傳播有三個(gè)階段 事件捕獲階段脐嫂、處于目標(biāo)階段、事件冒泡階段 紊遵，事件捕獲階段是從最上級(jí)window開始捕獲事件账千，逐級(jí)向下傳播到具體元素，執(zhí)行事件后再逐級(jí)向上傳播到window對(duì)象
題目4：如何阻止事件冒泡暗膜？ 如何阻止默認(rèn)事件匀奏？
- 高版本瀏覽器方法
stopPropagation()取消事件進(jìn)一步捕獲或冒泡
preventDefault()取消事件默認(rèn)行為 - IE中 是屬性
cancelBubble默認(rèn)為false,設(shè)置為true后可以取消事件冒泡
returnValue默認(rèn)為true，設(shè)為false可以取消事件默認(rèn)行為
題目5：有如下代碼学搜，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容娃善。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
var Lis = document.querySelectorAll('li');
Lis.forEach(function (li) {
li.addEventListener('click',function () {
console.log(this.innerText);
})
})
</script>
題目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)容坯台。
<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 $(str) {
return document.querySelector(str);
}
var ul = $('ul');
var addStart = $('#btn-add-start');
var addEnd = $('#btn-add-end');
var inp = $('.ipt-add-content');
addStart.addEventListener('click', function() {
if(inp.value != ''){
var newLi = document.createElement('li');
newLi.innerText = inp.value;
ul.insertBefore(newLi, ul.firstChild);
}
})
addEnd.addEventListener('click', function() {
if(inp.value != ''){
var newLi = document.createElement('li');
newLi.innerText = inp.value;
ul.insertBefore(newLi, ul.lastChild);
}
})
ul.addEventListener('click', function(e) {
if(e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
})
</script>
題目7： 補(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('mousemove', function(e) {
if(e.target.tagName.toLowerCase() === 'li') {
imgPreview.innerHTML = '<img src = "' + e.target.getAttribute('data-img') + '"/>';
}
})
</script>
