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