DOM事件

javaScript

事件是网页与用户交互的基础。

DOM事件级别

DOM事件级别分为DOM0、DOM2、DOM3

  • DOM0 直接在元素上绑定onClikc事件
  • DOM1 没有设计事件相关的东西,专注对html、xhtml文档的设计
  • DOM2 对DOM1增加了通过addEventListener('事件类型', callback, Boolean)绑定事件,第三个参数true(捕获)、false(冒泡),以及样式表对象模型
  • DOM3 对DOM2增加了内容模型 (DTD 、Schemas) 、文档验证、多种事件类型,比如"鼠标、键盘…"

DOM事件模型

冒泡、捕获

DOM事件流

事件通过捕获到达目标元素,在通过目标元素冒泡到window对象上。
捕获 --> 目标阶段 --> 冒泡

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

window --> document --> html --> body --> … --> 目标元素
使用document.documentElement可获取到html标签。

Event对象的常见应用

  1. event.preventDefault() 阻止默认事件
  2. event.stopPropagation() 阻止事件冒泡
  3. event.stopImmediatePropation() 事件响应优先级
  4. event.target(标准)、event.srcElement(IE) 事件来源
  5. event.currentTarget 当前绑定事件对象

自定义事件

const eleDiv = document.querySelector('#divs') // 自定义事件custome const evCustome = new Event('custome') // 监听自定义custome事件 eleDiv.addEventListener('custome', (e) => { console.log(e.type) }) // 派发事件 eleDiv.addEventListener('click', (e) => { e.currentTarget.dispatchEvent(evCustome) })

还可通过new CustomEvent添加自定义事件,用法和 Event 一样,不同之处在于可以添加参数。MDB文档参考文档
其他知识new MouseEvent

不支持冒泡的事件

ui事件:load、unload、resize、scroll
焦点事件:blur、focus
鼠标事件:mouseenter、mouseleave