事件
DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別
- DOM0事件：
通過JavaScript指定事件處理程序就是把一個方法賦值給一個元素的事件處理程序?qū)傩浴Ｃ總€元素都有自己的事件處理程序?qū)傩源靶@些屬性名稱通常為小寫夯秃，如onclick等，將這些屬性的值設置為一個函數(shù)痢艺，就可以指定事件處理程序仓洼。這樣處理，事件處理程序被認為是元素的方法堤舒，事件處理程序在元素的作用域下運行色建，this就是當前元素，所以點擊button結果是：btnClick這樣還有一個好處舌缤，我們可以刪除事件處理程序箕戳，只需把元素的onclick屬性賦為null即可
缺點：一個事件處理程序只能對應一個處理函數(shù) - DOM2事件：
DOM2級事件處理方式指定了，添加事件處理程序和刪除事件處理程序的方法国撵。分別是：
addEventListener(eventName,func,isPuhuo);
removeEventListener(eventName,func,isPuhuo);
參數(shù)分別是陵吸，事件處理屬性名稱，處理函數(shù)卸留，是否在捕獲時執(zhí)行事件處理函數(shù)走越。通過addEventListener添加的事件處理程序只能通過removeEventListener移除，移除時參數(shù)與添加的時候相同耻瑟，這就意味著剛才我們添加的匿名函數(shù)無法移除，因為匿名函數(shù)雖然方法體一樣喳整，但是句柄卻不相同
attachEvent與addEventListener的區(qū)別
區(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揭措，所以剛才例子才會返回undefined，而不是元素id - 為一個事件添加多個事件處理程序時绊含，執(zhí)行順序不同
addEventListener添加會按照添加順序執(zhí)行桑嘶，而attachEvent添加多個事件處理程序時順序無規(guī)律(添加的方法少的時候大多是按添加順序的反順序執(zhí)行的，但是添加的多了就無規(guī)律了)躬充，所以添加多個的時候逃顶，不依賴執(zhí)行順序的還好充甚，若是依賴于函數(shù)執(zhí)行順序，最好自己處理津坑，不要指望瀏覽器
解釋IE事件冒泡和DOM2事件傳播機制
-
IE的事件冒泡：
事件開始時由最具體的元素接收傲霸，然后逐級向上傳播到較為不具體的元素
IE事件冒泡 -
DOM事件流：
DOM2級事件規(guī)定事件流包括三個階段，事件捕獲階段昙啄，處于目標階段，事件冒泡階段梳凛，首先發(fā)生的是事件捕獲，為截取事件提供機會韧拒，然后是實際目標接收事件，最后是冒泡階段
DOM事件流
如何阻止事件冒泡塑悼？ 如何阻止默認事件
- 在DOM中：
preventDefault()方法可以阻止事件的默認行為楷掉，前提是cancelable值為true厢蒜，比如我們可以阻止鏈接導航這一默認行為
document.querySelector('#btn').onclick = function (e) {
e.preventDefault();
}
stopPropagation()方法可以停止事件在DOM層次的傳播，即取消進一步的事件捕獲或冒泡愕贡。我們可以在button的事件處理程序中調(diào)用stopPropagation()從而避免注冊在body上的事件發(fā)生
var handler = function (e) {
alert(e.type);
e.stopPropagation();
}
addEvent(document.body, 'click', function () { alert('Clicked body')});
var btnClick = document.getElementById('btnClick');
addEvent(btnClick, 'click', handler);
- IE:
e.cancelBubble = true; //取消冒泡
e.returnValue = false; //取消事件的默認行為
有如下代碼巷屿，要求當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容固以。不考慮兼容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>前端6班</li>
</ul>
<script>
document.querySelector('.ct').addEventListener('click', function(e){
if( e.target.tagName.toLowerCase() === 'li'){
console.log(e.target.innerText)
}
})
</script>
補全代碼
要求:
當點擊按鈕開頭添加時在<li>這里是</li>元素前添加一個新元素攒庵，內(nèi)容為用戶輸入的非空字符串；當點擊結尾添加時在最后一個 li 元素后添加用戶輸入的非空字符串.
當點擊每一個元素li時控制臺展示該元素的文本內(nèi)容
<ul class="ct">
<li>這里是</li>
<li>饑人谷</li>
<li>任務班</li>
</ul>
<input id="ipt-add-content" placeholder="添加內(nèi)容" type="text">
<button id="btn-add-start">開頭添加</button>
<button id="btn-add-end">結尾添加</button>
<script>
var ct = document.querySelector('.ct'),
addStartBtn = document.querySelector('#btn-add-start'),
addEndBtn = document.querySelector('#btn-add-end'),
ipt = document.querySelector('#ipt-add-content');
ct.addEventListener('click', function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log(e.target.innerText);
}
});
addStartBtn.addEventListener('click', function(e) {
if (/^\s*$/.test(ipt.value)) {
console.log('請輸入內(nèi)容');
} else {
var li = document.createElement('li');
li.innerText = ipt.value;
ct.insertBefore(li, ct.firstChild);
}
});
addEndBtn.addEventListener('click', function(e) {
if (/^\s*$/.test(ipt.value)) {
console.log('請輸入內(nèi)容');
} else {
var li = document.createElement('li');
li.innerText = ipt.value;
ct.appendChild(li);
}
});
</script>
補全代碼栽渴，要求：當鼠標放置在li元素上，會在img-preview里展示當前l(fā)i元素的data-img對應的圖片
<ul class="ct">
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">鼠標放置查看圖片1</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg">鼠標放置查看圖片2</li>
<li data-img="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg">鼠標放置查看圖片3</li>
</ul>
<div class="img-preview"></div>
<script>
var ul = document.querySelector('.ct');
var imgPreview = document.querySelector('.img-preview');
ul.addEventListener('mouseover', function(e) {
if (e.target.tagName.toLowerCase() === 'li') {
var img = e.target.getAttribute('data-img');
imgPreview.innerHTML = '<img src = "' + img + '">';
}
});
</script>
