DOM事件小計
基本概念：DOM事件的級別
DOM0: element.onclick = function(){}
DOM2: element.addEventListener('click',function(){},false)
DOM3: element.addEventListener('keyup',function(){},false)
DOM事件模型
- 捕獲
- 冒泡
DOM事件流
- 捕獲 === > 目標階段 ===> 冒泡
描述DOM事件捕獲的具體流程
捕獲具體流程（冒泡反之）
- window ===> document ===> html ===> body ===> ...目標元素
演示捕獲流程：
//body中新建一個id爲ev的div，寬高背景自己設置下
var ev = document.getElementById('ev')
window.addEventListener('click',function(){
console.log('window captrue');
},true)//true爲捕獲階段觸發，false爲冒泡階段觸發
document.addEventListener('click',function(){
console.log('document captrue');
},true)
document.documentElement.addEventListener('click',function(){
console.log('html captrue');
},true)
document.body.addEventListener('click',function(){
console.log('body captrue');
},true)
ev.addEventListener('click',function(){
console.log('ev captrue');
},true)
// 點擊id爲ev的div，查看控制檯打印如下
window captrue
document captrue
html captrue
body captrue
ev captrue
// 打印順序與註冊順序無關
Event對象的常見應用
- event.preventDefault() 阻止默認事件
- event.stopPropagation() 阻止冒泡
- event.stopImmediatePropagation() 事件響應優先級
- event.currentTarget 指向引起觸發事件的元素
- event.target 事件綁定的元素
自定義事件（模擬事件）
var eve = new Event('custome');
element.addEventListener('custome',function(){
console.log('custome');
});
element.dispatchEvent(eve);
// 注意是事件對象eve而不是事件名custome