DOM事件捕獲與冒泡自定義事件

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