1 DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別?
- DOM0級事件監(jiān)聽就是把一個方法賦值給一個元素的事件處理程序?qū)傩?將這些屬性的值設(shè)置為一個函數(shù),就可以指定事件處理程序.一個事件只能綁定一次,并且新方法會覆蓋老方法.例如
btn.onclick=function(){} - DOM2級事件監(jiān)聽定義了兩個方法用于處理指定和刪除事件處理程序的操作:
addEventListener,removeEventListener.所有的DOM節(jié)點都包含這兩個方法,并且它們都接受三個參數(shù):事件類型,事件處理方法,布爾參數(shù).例如addEventListener,removeEventListener.可以選擇按照冒泡的順序處理還是捕獲的順序處理.
2 attachEvent與addEventListener的區(qū)別?
- 參數(shù)個數(shù)不同:addEventListener有三個參數(shù),attachEvent只有兩個,attachEvent添加的事件處理程序只能發(fā)生在冒泡階段,addEventListener第三個參數(shù)布爾值可以決定添加的事件處理程序是在捕獲階段還是冒泡階段處理;
- 第一個參數(shù)意義不同:addEventListener第一個參數(shù)是事件類型(比如click,load),而attachEvent第一個參數(shù)指明的是事件處理函數(shù)名稱(onclick,onload);
- 事件處理程序的作用域不相同:addEventListener的作用域是元素本身,this是指的觸發(fā)元素,而attachEvent事件處理程序會在全局變量內(nèi)運行,this是window;
- 為一個事件添加多個事件處理程序時：執(zhí)行順序不同服球，addEventListener添加會按照添加順序執(zhí)行,而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的,但是添加的多了就無規(guī)律了)
3 解釋IE事件冒泡和DOM2事件傳播機制?
- IE事件冒泡:一開始由最具體的元素接受事件,然后逐級向上傳遞到較為不具體的事件.
- DOM2事件傳播機制:DOM2級事件規(guī)定事件流包括三個階段,事件捕獲階段,處于目標(biāo)階段,事件冒泡階段,首先發(fā)生的是事件捕獲,為截取事件提供機會,然后是實際目標(biāo)接收事件,最后是冒泡階段.
4 如何阻止事件冒泡?如何阻止默認事件?
- 對于兼容DOM2級事件傳播方式的瀏覽器,事件處理函數(shù)會傳入一個event對象,調(diào)用event.stopPropagation()方法阻止事件繼續(xù)傳播,調(diào)用event.preventDefault()取消默認事件.
對于老版本IE來說,設(shè)置event對象的cancelBubble位true來取消事件冒泡,設(shè)置returnValue的值為false來取消默認事件.
5 有如下代碼,要求當(dāng)點擊每一個元素li時控制臺展示該元素的文本內(nèi)容.不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
document.querySelector('.ct').addEventListener('click',function (e) {
console.log(e.target.innerText);
});
</script>
6 補全代碼,要求:
當(dāng)點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素,內(nèi)容為用戶輸入的非空字符串;當(dāng)點擊結(jié)尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當(dāng)點擊每一個元素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>
//你的代碼
</script>
<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 addStartBtn = document.querySelector('#btn-add-start');
var addEndBtn = document.querySelector('#btn-add-end');
var ipt = document.querySelector('#ipt-add-content');
ct.addEventListener('click',function (e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
});
addEndBtn.addEventListener('click',function () {
var li = document.createElement('li');
li.innerText = ipt.value;
ct.appendChild(li);
})
addStartBtn.addEventListener('click',function () {
var li = document.createElement('li');
li.innerText = ipt.value;
ct.insertBefore(li,ct.firstChild);
})
</script>
7 補全代碼,要求:當(dāng)鼠標(biāo)放置在li元素上,會在img-preview里展示當(dāng)前l(fā)i元素的data-img對應(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>
//你的代碼
</script>
<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 childs = ct.querySelectorAll('li');
var imgPreview = document.querySelector('.img-preview');
for (var i=0;i<childs.length;i++){
childs[i].addEventListener('mouseenter',function () {
var dataing = this.getAttribute('data-img');
imgPreview.innerHTML = ''
})
}
</script>
