[TOC]

DOM3 Events 在 DOM2 Events 基础上重新定义了事件，并增加了新的事件类型

  • 用户界面事件 (UIEvent)
    • 涉及与 BOM 交互的通用浏览器事件
  • 焦点事件 (FocusEvent)
    • 在元素获得和推动焦点时触发
  • 鼠标事件 (MouseEvent)
    • 使用鼠标在页面上执行某些操作时触发
  • 滚轮事件 (WheelEvent)
    • 使用鼠标滚轮（或类似设备）时触发
  • 输入事件 (InputEvent)
    • 向文档中输入文本时触发
  • 键盘事件 (KeyboardEvent)
    • 使用键盘在页面上执行某些操作时触发
  • 合成事件 (CompositionEvent)
    • 在使用某种IME输入字符时触发

还有 HTML5 定义了另一组事件，而浏览器通常在 DOM 和 BOM 上实现专有事件。专有事件基本上是根据开发者需求而不是按照规范增加，所以不同浏览器实现可能不同。

用户界面事件

  • load：在 window 上当页面加载完成后触发，在窗套（）上当所有窗格（）都加载完成后触发，在事件类型 - 图1元素上当图片加载完成后触发，在元素上当相应对象加载完成后触发。
  • unload：在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在元素上当相应对象卸载完成后触发。
  • abort：在元素上当相应对象加载完成前被用户提前终止下载时触发。
  • error：在 window 上当 JavaScript 报错时触发，在事件类型 - 图2元素上当无法加载指定图片时触发，在元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时触发。
  • select：在文本框（或textarea）上当用户选择了一个或多个字符时触发。
  • resize：在window或窗格上当窗口或窗格被缩放时触发。
  • scroll：当用户滚动包含滚动条的元素时在元素上触发。元素包含已加载页面的滚动条。

    大多数HTML事件与window对象和表单控件有关。

    • load 事件

    在 window 上当页面加载完成后触发，在窗套（）上当所有窗格（）都加载完成后触发，在事件类型 - 图3元素上当图片加载完成后触发，在元素上当相应对象加载完成后触发

    • 在整个页面（包括所有外部资源如图片、JavaScript 文件和 CSS 文件）加载完成后触发
      • window 对象 (DOM2 Events 是在 document 而非 window，为了向后兼容，所以 window 实现 load 事件)
        • window.addEventListener(“load”, (event)=>{console.log(“loaded”});
      • body元素
    • 在 事件类型 - 图4 元素上当图片加载完成后触发

    • 在