DOM事件

DOM事件级别。DOM事件模型。 DOM事件流。DOM捕获的具体流程。Event对象的常见应用。自定义事件。

DOM级别

  • DOM0 ele.onclick=function(){}
  • DOM2 ele.addEventListener(type,function(){},flase)
  • DOM3 keyup 等，事件类型多了

事件模型

捕获，冒泡

事件流

捕获，目标阶段，冒泡。

捕获具体流程

window — document — html （document.documentElement）— body — 层次结构

event对象

  • e.preventDefalut() 阻止默认事件
  • e.stopPropagation() 停止冒泡
  • e.stopImmediatePropagation() 按钮绑定了多个事件，先触发a，再b。不想触发b了

在a的方法中设定，事件响应优先级

  • e.currentTarget 当前被绑定的事件元素，委托时候是父级
  • e.target 当前被点击的元素

自定义事件

  1. var e = new Event('custom')
  2. ev.addEventListener('custom',()=>{
  3.     console.log('x')
  4. })
  5. ev.dispatchEvent(e)

声明事件。

DOM绑定事件，通过 dispatchEvent 注册

CustomEvent 比 event，除了指定事件名，还可以指定参数事件