Dom事件

基本概念

• Dom事件级别
• Dom事件模型
• Dom事件流
• 描述Dom事件捕获的具体流程
• Event对象的常见应用
• 自定义事件(重点)

Dom事件级别

• Dom0:ele.onCLick = function(){}
• Dom2:ele.addEventlistener('click',function(){},false){}
• Dom3:ele.addEventlistener('keyup',function(){},false){}

事件模型

• 捕获:从上至下
• 冒泡:从下至上

事件流

完整的事件流分3个阶段:
第一阶段:捕获
第二阶段:到达目标元素
第三阶段:目标上传到windows(冒泡的过程)

Dom事件的捕获流程

windows -> document -> html -> body -> .... -> 目标元素

Event对象

• 常见应用
  • event.preventDefault() 取消默认事件
  • event.stopPropagation / event.cancelbubble 取消冒泡
  • event.stoplmmediatePropagation() 事件优先级
  • event.currentTarget 当前绑定的事件
  • evnet.target / event.srcElement 事件源

自定义事件

var eve = new Event('custome')
var ev = document.querySelector('#ev');

//第三个参数,默认为false,执行冒泡触发,true则为捕获触发,参考上述流程
ev.addEventlistener('custome',function(){},false)
ev.dispatchEvent(eve) //触发事件

• new Event只能声明一个自定义事件的名称,如果有更多需求可以使用CustomEvent('事件名称'.obj)