一、基本概念：
DOM事件的級別
- DOM0: element.onclick=function(){}
- DOM2: element.addEventListener('click',function(){},false)
- DOM3: element.addEventLListener('keyup',function(){},false) 增加了很多事件類型
注意：true表示在捕獲階段觸發(fā)，false表示在冒泡階段觸發(fā)，默認(rèn)是false。
DOM1沒有設(shè)計和DOM事件相關(guān)相關(guān)的內(nèi)容。
二、DOM事件模型
- 事件捕獲：從上往下找到目標(biāo)元素
- 事件冒泡：從目標(biāo)元素往上查找
三、DOM事件流
瀏覽器為當(dāng)前頁面和用戶做交互的過程中發(fā)生的過程，一個完整的事件流分三個階段。
- 事件捕獲
- 目標(biāo)階段
- 事件冒泡
事件通過捕獲到達目標(biāo)元素，這個時候就是目標(biāo)階段，第三個階段就是從目標(biāo)元素上傳到window對象。
四、描述DOM事件捕獲的具體流程
window——>document——>html——>body——>父級元素——>...——>目標(biāo)元素
<body>
<div id="ev">
<style>
#ev {
width: 300px;
height: 100px;
background: #f00;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
目標(biāo)元素
</div>
<script type="text/javascript">
var ev = document.getElementById("ev");
ev.addEventListener('click', function() {
console.log("ev capture");
}, true);
window.addEventListener('click', function() {
console.log("window capture");
}, true);
document.addEventListener('click', function() {
console.log("document capture");
}, true);
document.documentElement.addEventListener('click', function() {
console.log("html capture");
}, true);
document.body.addEventListener('click', function() {
console.log("body capture");
}, true);
</script>
</body>
// 打印結(jié)果是
// window capture
// document capture
// html capture
// body capture
// ev capture
五、Event對象的常見應(yīng)用
1、event.preventDefault()：阻止默認(rèn)行為
2、event.stopPropagation() ：阻止冒泡行為
3、event.stopImmediatePropagation() ：阻止其他事件，事件響應(yīng)優(yōu)先級。（若一個按鈕綁定了兩個或多個事件：事件a、事件b、……。當(dāng)下場景想要實現(xiàn)點擊按鈕的時候只執(zhí)行事件a，其他事件不執(zhí)行，則在事件a的函數(shù)中加上event.stopImmeidiatePropagation()就能實現(xiàn)）
4、event.currentTarget ：當(dāng)前所被綁定的事件
5、event.target：當(dāng)前被點擊的元素（早期的ie版本不支持，早期ie用event.srcElement）
六、自定義事件（模擬事件）
1、自定義事件和自定義觸發(fā)事件的過程(只能指定事件名，不能給事件加數(shù)據(jù))
// 注冊事件
var eve = new Event("test");
// ev就是普通的DOM節(jié)點
ev.addEventListener("test",function(){
//綁定事件名稱
console.log("test");
},false);
// 此時是通過dispatchEvent自動觸發(fā)事件，通常和其他事件結(jié)合使用
ev.dispatchEvent(eve);
// 延時5秒后觸發(fā)
setTimeout(function() {
ev.dispatchEvent(eve);
}, 5000);
2、除了指定事件名，還能給事件加一個Object，用來傳遞自定義參數(shù)
var eve = new Event("test", { detail: elem.dataset.time });
