53、JavaScript 事件处理全解析

JavaScript 事件处理全解析

1. 事件基础概念

在 Web 开发中，事件处理是一项核心技能，它能让网页与用户进行交互。事件传播是其中一个重要概念，它分为普通传播和事件捕获两种形式。事件捕获中，专门注册在容器元素上的处理程序有机会在事件到达实际目标之前拦截事件，但 IE8 及更早版本不支持该特性，所以它并不常用。不过，在处理鼠标拖动事件时，捕获鼠标事件的能力是必需的。

有些事件有与之关联的默认操作。例如，当点击超链接时，浏览器的默认操作是跟随链接并加载新页面。事件处理程序可以通过返回适当的值、调用事件对象的方法或设置事件对象的属性来阻止这种默认操作，这有时被称为“取消”事件。

1.1 事件类型概述

早期的 Web 开发中，客户端程序员只能使用少量事件，如“load”、“click”、“mouseover”等。随着 Web 平台的发展，支持的事件数量迅速增长，这些新事件主要来自三个来源：
- DOM Level 3 事件规范 ：由 W3C 开发，目前处于“最后调用工作草案”阶段，它对许多旧事件进行了标准化，并添加了一些新事件。
- HTML5 规范及相关衍生规范 ：定义了许多新 API，同时也带来了如历史管理、拖放、跨文档消息传递以及音视频播放等方面的新事件。
- 基于触摸和支持 JavaScript 的移动设备 ：如 iPhone 等，催生了新的触摸和手势事件类型。

需要注意的是，许多新事件类型尚未广泛实现，相关标准仍处于草案阶段。

1.2 事件分类