DOM事件类

DOM事件类

• 基本概念：DOM事件的级别
• DOM事件模型
• DOM事件流
• 描述DOM事件捕获的具体流程
• Event对象的常见应用
• 自定义事件

1、DOM事件的级别

• DOM0 element.onclick=function(){}
• DOM2 element.addEventListener('click',function(){},false)(冒泡和捕获 true 时在捕获阶段)
• DOM3 element.addEventListener('keyup',function(){},false)鼠标键盘事件

2、事件模型

• 捕获、冒泡

3、事件流

• 捕获 <--> 冒泡
• 事件通过捕获到达目的阶段，从目标元素上传到window对象也就是冒泡

4、描述DOM事件捕获的具体流程

• window-->document-->html-->body-->...-->目标元素
• 获取html是document.documentElement

5、Event对象的常见应用

• event.preventDefault() 阻止默认事件（a跳转）
• event.stopPropagation() 阻止冒泡行为
• event.stopImmediatePropagation() 事件响应优先级
• event.currentTarget() 当前绑定的事件
• event.target() 目标元素

6、自定义事件

var eve = new Event('custome');
ev.addEventListener('custome',function(){
	console.log('custome')
})
ev.dispathEvent(eve);
customEvent