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