題目1： DOM0 事件和DOM2級(jí)在事件監(jiān)聽使用方式上有什么區(qū)別垫卤？
所謂的0級(jí)ｄｏｍ與２級(jí)ｄｏｍ事件就是不同版本間的差異横堡，具體的說(shuō)就是莺丑，對(duì)于不同的ｄｏｍ級(jí)別，在形式上和功能上都是有差異的结榄。
形式上區(qū)別：
- dom0 事件是指定的事件處理程序被認(rèn)為是元素的方法中贝。
就是將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩裕總€(gè)元素包括window和document都有自己處理程序的屬性）臼朗。
例如： onclick onmouseover onmouseout 等雄妥，都是on+type
這個(gè)時(shí)候的事件處理程序在元素的作用域中執(zhí)行。
···
<button id="btn">提交</button>
<button id="btn2" class="bbb">注冊(cè)</button>
···
var btn= document.getElementById('btn')
btn.onclick= function(){ //DOM0的表示形式 屬性名要+ on
console.log('提交成功')
}
提交成功
var btn= document.getElementById('btn2')
btn.addEventListener('click',function(e){ //DOM2的表示形式
console.log(this)
console.log(e)
console.log('注冊(cè)成功了')
});
<button id="btn2" class="bbb">注冊(cè)</button>
MouseEvent {isTrusted: true, screenX: 72, screenY: 84, clientX: 72, clientY: 18…}
注冊(cè)成功了
- ’DOM2級(jí)事件’定義了兩個(gè)方法依溯，用于處理指定和刪除事件處理程序的操作：addEventListener()和removeEventListener();
所有的DOM節(jié)點(diǎn)都包含這兩種方法老厌。
它們都接受3個(gè)參數(shù)：要處理的事件名，事件處理程序的函數(shù)黎炉，和一個(gè)布爾值枝秤。
最后一個(gè)參數(shù)：如果為true，表示在捕獲階段調(diào)用事件處理程序慷嗜，如果是false淀弹，表示在冒泡階段調(diào)用事件處理程序。
功能上區(qū)別：
dom0 是一個(gè)函數(shù)賦值給一個(gè)時(shí)間處理程序?qū)傩裕╫nclick等）庆械，多次賦值后面的會(huì)覆蓋前面薇溃。
dom2 中傳遞多個(gè)參數(shù)，調(diào)用多次回調(diào)函數(shù)缭乘，添加多個(gè)事件沐序，函數(shù)不會(huì)出現(xiàn)覆蓋
題目2： attachEvent與addEventListener的區(qū)別？
| 區(qū)別 | attachEvent | addEventListener |
|---|---|---|
| 參數(shù)個(gè)數(shù)不同 | 有2個(gè)參數(shù)(函數(shù)名稱堕绩，function(){}) | 有3個(gè)參數(shù)(事件類型策幼，function(){}, true/false) |
| 第一個(gè)參數(shù)的意義不同 | 事件處理函數(shù)的名稱on+type | 事件的類型type |
| 事件的作用域不同 | 全局變量?jī)?nèi)運(yùn)行，this->window | 元素本身,this->觸發(fā)元素 |
| 一個(gè)事件有多個(gè)事件處理時(shí)的執(zhí)行順序不同 | 無(wú)規(guī)律順序 | 按照添加順序執(zhí)行 |
| 事件處理階段 | 只在冒泡階段 | true 奴紧，在捕獲階段處理 特姐；默認(rèn)為false ，在冒泡階段處理 |
題目3： 解釋IE事件冒泡和DOM2事件傳播機(jī)制黍氮？
先解釋幾個(gè)詞：
事件： 由用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作唐含，是某種行為或者觸發(fā)浅浮，比如： 點(diǎn)擊click 鼠標(biāo)滑過(guò)mouseover ...
javascript 和html就是通過(guò)事件實(shí)現(xiàn)交互的。
事件處理程序（事件監(jiān)聽器）：執(zhí)行的某種的動(dòng)作（點(diǎn)擊捷枯、加載脑题、鼠標(biāo)等其他行為），響應(yīng)這個(gè)動(dòng)作（事件）的方法
IE事件冒泡 是 事件開始由具體的元素铜靶，逐級(jí)向上傳播到不具體的元素（由具體到不具體）
DOM2事件傳播機(jī)制
DOM2級(jí)事件規(guī)定事件流包含3個(gè)階段：
（1）事件捕獲階段： 由外層不具體的 逐級(jí) 向內(nèi)傳播到具體的元素（由外到內(nèi)）
（2）處于目標(biāo)階段 ，事件本身
（3）事件冒泡階段： 由具體的逐級(jí)向外到不具體的元素（由內(nèi)到外）
- 事件流： 從頁(yè)面接收事件的順序他炊。
題目4：如何阻止事件冒泡争剿？ 如何阻止默認(rèn)事件？
阻止事件冒泡
類似中斷 痊末，取消事件冒泡后蚕苇， 事件不會(huì)繼續(xù)往外傳播，外面監(jiān)聽不到
cancelBubble=true用于ie的阻止冒泡事件凿叠，
event.stopPropagation（）用于firefox和chrome等其他瀏覽器涩笤。
.box{
background: red;
width: 200px;
height: 200px;
}
.box1{
background: green;
width: 120px;
height: 100px;
}
p{
background: yellow
}
<div class="box">
<div class="box1">
<p>你好</p>
</div>
</div>
var p= document.querySelector('p');
p.addEventListener('click',function(e){
console.log('p 標(biāo)簽')
//console.log(e) //返回事件的相關(guān)信息 ，包括事件元素盒件、事件類型等
})
var box1= document.querySelector('.box1');
box1.addEventListener('click',function(e){
e.stopPropagation(); //阻止事件冒泡
console.log('box1 djakd')
})
var box= document.querySelector('.box');
box.addEventListener('click',function(){
console.log('box djkah')
})
冒泡的過(guò)程： p——>div.box1——> div.box
對(duì)box1的事件阻止冒泡后蹬碧，不會(huì)輸出 box的內(nèi)容
輸出：
p 標(biāo)簽
box1 djakd
阻止默認(rèn)操作
作用是取消一個(gè)目標(biāo)元素的默認(rèn)行為。
既然是說(shuō)默認(rèn)行為炒刁，當(dāng)然是元素必須有默認(rèn)行為才能被取消恩沽，如果元素本身就沒有默認(rèn)行為，調(diào)用當(dāng)然就無(wú)效了翔始。
什么元素有默認(rèn)行為呢罗心？如鏈接<a>跳轉(zhuǎn)src地址，提交按鈕<input type=”submit”>提交form等城瞎。
e.preventDefault()用于firefox和chrome等其他瀏覽器渤闷。
IE 則是使用 e.returnValue = false;
首先是默認(rèn)事件，preventDefault() 才能生效
<a id="link" href="baidu.com" >官網(wǎng)</a>
document.querySelector('#link').addEventListener('click',function(e){
e.preventDefault();// 阻止跳轉(zhuǎn)頁(yè)面
console.log('沒有跳轉(zhuǎn)')
})
效果： 點(diǎn)擊鏈接脖镀，沒有跳轉(zhuǎn)
輸出：
沒有跳轉(zhuǎn)
題目5：有如下代碼飒箭，要求當(dāng)點(diǎn)擊每一個(gè)元素li時(shí)控制臺(tái)展示該元素的文本內(nèi)容。不考慮兼容
ul,li{
list-style: none;
}
ul{
border: 1px solid;
padding: 0;
}
ul li{
border: 1px solid #ccc;
margin: 8px 2px
}
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct= document.querySelector('.ct');
ct.addEventListener('click',function(e){
var b=e.target.innerText;
console.log(b)
})
</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>
// 事件代理盈匾，添加新的元素，就不用再綁定
var ct= document.querySelector('.ct');
ct.addEventListener('click',function(e){ //e事件對(duì)象用來(lái)找到目標(biāo)元素,表示li
// console.log(e)
var b=e.target; //target屬性： 目標(biāo)元素（標(biāo)簽）li
if(b.tagName.toLowerCase()==='li'){//避免點(diǎn)擊到li以外的區(qū)域毕骡，做一個(gè)判斷削饵，當(dāng)當(dāng)前的對(duì)象的目標(biāo)元素是li時(shí)岩瘦，
console.log(b.innerText) // 輸出控制臺(tái) 目標(biāo)元素的內(nèi)容
}
})
var ipt= document.querySelector('.ipt-add-content')
var btn= document.querySelector('#btn-add-start');
btn.addEventListener('click',function(){
var li= document.createElement('li');// 添加一個(gè)新的li
if(ipt.value.length>0){
li.innerText= ipt.value; // 獲取輸入框的內(nèi)容給當(dāng)前的這個(gè)li
//在添加li 到開始位置
ct.insertBefore(li,ct.firstElementChild); //添加的新節(jié)點(diǎn)，添加的節(jié)點(diǎn)位置之前 //ct.firstElementChild 為ul的開頭第一個(gè)子元素
}
})
var btn= document.querySelector('#btn-add-end');
btn.addEventListener('click',function(){
var li= document.createElement('li')
if(ipt.value.length>0){
li.innerText= ipt.value;
ct.appendChild(li);
}
})
</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>
var ct= document.querySelector('.ct');
var images= document.querySelector('.img-preview')
ct.addEventListener('mouseover',function(e){
var danli=e.target;
if(danli.tagName.toLowerCase()==='li'){
// console.log(this)
var path=danli.getAttribute('data-img')
//如果傳入的元素是文本的話 可以直接用 innerText傳入
// 但是 如果是圖片的話劈伴， 沒法獲取文本
// 所以可以用innerHTML=‘可以將這個(gè)標(biāo)簽加到HTML中密末，即而可以運(yùn)行’
// console.log(path)
images.innerHTML=''
// console.log(images.innerHTML)
}
})
