DOM事件知识点梳理

一、DOM事件的级别

1. DOM0 element.onclick = funcition(){}
   (DOM1标准中没有设定和事件相关的内容,略过)
2. DOM2 element.addEventListener(‘click’, function(){}, false)
3. DOM3 element.addEventListener(‘keyup’, function(){}, false)//新增键盘事件

二、事件流

第一阶段：捕获。
window => document => html => body … =>目标元素
第二阶段：到达目标。
第三阶段：冒泡。(和捕获相反)

三、Event对象的常见应用

event.preventDefault() //阻止默认行为
event.stopPropagation() //阻止冒泡
event.stopImmediatePropagation() //一个元素注册两个响应事件，那么后注册的不会执行
event.currentTarget //点击目标当前绑定的对象
event.target //被点击的目标

四、自定义事件

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