事件的类型

Web 浏览器中可以发生很多种事件。所发生事件的类型决定了事件对象中会保存什么信息。DOM3 Events 定义了如下事件类型。 用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。 焦点事件（FocusEvent）：在元素获得和失去焦点时触发。 鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。 滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。 输入事件（InputEvent）：向文档中输入文本时触发。 键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。 合成事件（CompositionEvent）：在使用某种 IME（Input Method Editor，输入法编辑器） 输入字符时触发。 除了这些事件类型之外，HTML5 还定义了另一组事件，而浏览器通常在 DOM 和 BOM 上实现专有 事件。这些专有事件基本上都是根据开发者需求而不是按照规范增加的，因此不同浏览器的实现可 能不同。 DOM3 Events 在 DOM2 Events 基础上重新定义了事件，并增加了新的事件类型。所有主流浏览 器都支持 DOM2 Events 和 DOM3 Events。 用户界面事件 用户界面事件或 UI 事件不一定跟用户操作有关。这类事件在 DOM 规范出现之前就已经以某种 形式存在了，保留它们是为了向后兼容。UI 事件主要有以下几种。 DOMActivate：元素被用户通过鼠标或键盘操作激活时触发（比 click 或 keydown 更通用）。 这个事件在 DOM3 Events 中已经废弃。因为浏览器实现之间存在差异，所以不要使用它。 load：在 window 上当页面加载完成后触发，在窗套（）上当所有窗格（） 都加载完成后触发，在元素上当图片加载完成后触发，在元素上当相应对象加 载完成后触发。 unload：在 window 上当页面完全卸载后触发，在窗套上当所有窗格都卸载完成后触发，在 元素上当相应对象卸载完成后触发。 abort：在元素上当相应对象加载完成前被用户提前终止下载时触发。 error：在 window 上当 JavaScript 报错时触发，在元素上当无法加载指定图片时触 发，在元素上当无法加载相应对象时触发，在窗套上当一个或多个窗格无法完成加载时 触发。select：在文本框（或 textarea）上当用户选择了一个或多个字符时触发。 resize：在 window 或窗格上当窗口或窗格被缩放时触发。
scroll：当用户滚动包含滚动条的元素时在元素上触发。元素包含已加载页面的滚动 条。大多数 HTML 事件与 window 对象和表单控件有关。 除了 DOMActivate，这些事件在 DOM2 Events 中都被归为 HTML Events（DOMActivate 在 DOM2 中仍旧是 UI 事件）。 1. load 事件 load 事件可能是 JavaScript 中最常用的事件。在 window 对象上，load 事件会在整个页面（包 括所有外部资源如图片、JavaScript 文件和 CSS 文件）加载完成后触发。可以通过两种方式指定 load 事 件处理程序。第一种是 JavaScript 方式，如下所示： window.addEventListener(“load”, (event) => { console.log(“Loaded!”); }); 这是使用 addEventListener()方法来指定事件处理程序。与其他事件一样，事件处理程序会接 收到一个 event 对象。这个 event 对象并没有提供关于这种类型事件的额外信息，虽然在 DOM 合规的浏览器中，event.target 会被设置为 document，但在 IE8 之前的版本中，不会设置这个对 象的srcElement 属性。 第二种指定 load 事件处理程序的方式是向元素添加 onload 属性，如下所示： 一般来说，任何在 window 上发生的事件，都可以通过给元素上对应的属性赋值来指定， 这是因为 HTML 中没有 window 元素。这实际上是为了保证向后兼容的一个策略，但在所有浏览器 中都能得到很好的支持。实际开发中要尽量使用 JavaScript 方式。 图片上也会触发 load 事件，包括 DOM 中的图片和非 DOM 中的图片。可以在 HTML 中直接给 元素的 onload 属性指定事件处理程序，比如： 这个例子会在图片加载完成后输出一条消息。同样，使用 JavaScript 也可以为图片指定事件处理程序：

这里使用 JavaScript 为图片指定了 load 事件处理程序。处理程序会接收到 event 对象，虽然这 个
对象上没有多少有用的信息。这个事件的目标是元素，因此可以直接从 event.target.src 属性中取得图片地址并打印出来。