事件模型、事件冒泡、事件捕獲、事件代理、阻止默認(rèn)事件、事件兼容等
題目1: DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別?
- 添加多個事件處理程序區(qū)別:
Dom2級:可以添加多個事件處理程序
Dom0級:為一個事件添加多個事件處理程序時(shí),后面的程序會覆蓋前面的。 - 是否可選事件模型
Dom2級:可以選擇是在捕獲階段(true)和冒泡階段(false)
Dom0級:只能在冒泡階段 - 刪除綁定在元素上的事件處理程序
Dom2級:removeEventListener()
var btn=document.querySelector("#btn");
var handler=function(){
alert(this.id);
}
btn.addEventListener("click",handler,false);// 指定事件處理程序
btn.removeEventListener("click",handler,false);// 刪除事件處理程序
Dom0級:將事件處理程序設(shè)置為null
var btn=document.querySelector("#btn");
btn.onclick=function () {
alert(this.id);
}// 添加事件處理程序
btn.onclick=null;// 刪除事件處理程序
題目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為一個事件添加多個事件處理程序時(shí),執(zhí)行順序不同
addEventListener添加會按照添加順序執(zhí)行,而attachEvent添加多個事件處理程序時(shí)順序無規(guī)律(添加的方法少的時(shí)候大多是按添加順序的反順序執(zhí)行的,但是添加的多了就無規(guī)律了),所以添加多個的時(shí)候,不依賴執(zhí)行順序的還好,若是依賴于函數(shù)執(zhí)行順序,最好自己處理,不要指望瀏覽器
題目3: 解釋IE事件冒泡和DOM2事件傳播機(jī)制?
IE事件冒泡:事件開始時(shí)由最具體的元素接收,然后逐級向上傳播到較為不具體的元素,如上圖一中所示,如果是一個點(diǎn)擊事件,當(dāng)點(diǎn)擊div時(shí),是一層一層的向父級元素傳遞
DOM2級事件規(guī)定事件流包括三個階段,事件捕獲階段,處于目標(biāo)階段,事件冒泡階段,首先發(fā)生的是事件捕獲,為截取事件提供機(jī)會,然后是實(shí)際目標(biāo)接收事件,最后是冒泡階段
題目4: 如何阻止事件冒泡? 如何阻止默認(rèn)事件?
支持DOM2瀏覽器
阻止冒泡e.stopPropagation();
阻止默認(rèn)事件event.preventDefault()IE瀏覽器
阻止冒泡e.cancelBubble = true;
阻止默認(rèn)事件event.returnValue = false;
阻止事件冒泡
function stopPropagation(event){
if(event.stopPropagation){
event.stopPropagation()
}
else{
event.cancelBubble = true;
}
}
阻止默認(rèn)事件
function preventDefault(event){
if(event.preventDefault){
event.preventDefault()
}
else{
e.returnValue = false;
}
}
題目5: 有如下代碼,要求當(dāng)點(diǎn)擊每一個元素li時(shí)控制臺展示該元素的文本內(nèi)容。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct=document.querySelector('.ct');
ct.addEventListener('click',showText);//將事件監(jiān)聽放在父級元素
function showText(event){
console.log(event.target.innerText);
}
</script>
題目6: 補(bǔ)全代碼,要求:
當(dāng)點(diǎn)擊按鈕開頭添加時(shí)在<li>這里是</li>元素前添加一個新元素,內(nèi)容為用戶輸入的非空字符串;當(dāng)點(diǎn)擊結(jié)尾添加時(shí)在最后一個 li 元素后添加用戶輸入的非空字符串.
當(dāng)點(diǎn)擊每一個元素li時(shí)控制臺展示該元素的文本內(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');
var ipt=document.querySelector('.ipt-add-content');
var addStart=document.querySelector('#btn-add-start');
var addEnd=document.querySelector('#btn-add-end');
ct.addEventListener('click',showText);
addStart.addEventListener('click',addBefore);
addEnd.addEventListener('click',addAfter);
function showText(event){
console.log(event.target.innerText);
}
function addBefore(){
if(!ipt.value){
alert('Please fill in the contents in the input box');
return;
};
var li=document.createElement('li');
li.innerText=ipt.value;
ct.insertBefore(li,ct.firstChild);
}
function addAfter(){
if(!ipt.value){
alert('Please fill in the contents in the input box');
return;
};
var li=document.createElement('li');
li.innerText=ipt.value;
ct.appendChild(li);
}
</script>
題目7: 補(bǔ)全代碼,要求:當(dāng)鼠標(biāo)放置在li元素上,會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(yīng)的圖片。
<ul class="ct">
<li data-img="http://a.hiphotos.baidu.com/zhidao/pic/item/1b4c510fd9f9d72aa05bac6cd22a2834349bbb80.jpg">鼠標(biāo)放置查看圖片1</li>
<li data-img="http://www.qqleju.com/uploads/allimg/140326/26-045728_826.jpg">鼠標(biāo)放置查看圖片2</li>
<li data-img="http://img1.3lian.com/2015/w2/12/d/83.jpg">鼠標(biāo)放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ct = document.querySelector('.ct');
var preview = document.querySelector('.img-preview');
ct.addEventListener('mouseover',eventOver);
ct.addEventListener('mouseout',eventOut);
function eventOver(e){
var img = e.target.getAttribute('data-img');
preview.innerHTML = '<img src = "' + img + '">';
}
function eventOut(e){
preview.innerHTML = '';
}
</script>
題目8: 在 github 上創(chuàng)建個人項(xiàng)目,把視頻里事件兼容的函數(shù)寫法放入項(xiàng)目,在 Readme.md里描述項(xiàng)目(選做題目)
<script>
//綁定事件
function bindEvent(node,type,handler){
if(node.addEventListener){
node.addEventListener(type,handler);
}
else{
node.attachEvent('on'+type,handler);
}
}
//解除事件
function removeEvent(node,type,handler){
if(node.removeEventListener){
node.removeEventListener(type,handler);
}
else{
node.detachEvent('on'+type,handler);
}
}
//獲取target
function getTarget(e){
return e.target || e.srcElement;
}
</script>