JavaScript 事件浏览器兼容性详解：从基础到各厂商实现

当特定 HTML 元素上发生事件时，其名称能被大多数浏览器识别。这意味着浏览器会查找并立即执行为该元素注册的事件处理程序脚本。

早期仅有少数事件，这些事件在几乎所有 JavaScript 浏览器中均可运行，包括非常古老的版本。需要注意的是，早期事件仅能在链接或表单元素上工作，有时也能作用于整个窗口，但无法在其他大多数 HTML 元素上触发。

随着时代发展，许多新的事件类型被引入。第四代及更高版本的浏览器允许在任何 HTML 元素上注册事件。

因此，理论上你可以在任何元素上绑定任意事件，尽管在 <P> 标签上绑定 keydown 事件并无实际意义。

此处可查阅完整的浏览器事件兼容性列表。

界面事件 (Interface events)

界面事件并非由用户直接动作触发，而是由用户行为产生的结果所触发。

用户在任意元素上单击都会触发 click 事件。当点击发生在具有特殊含义的元素上时，会额外触发其他界面事件。

例如，当用户在链接上单击时，首先触发 click 事件。由于单击链接会导致新页面加载，因此该特殊的 click 事件会进一步触发 unload 界面事件。

其他常见的界面事件还包括 resize、scroll 以及 focus/blur。

鼠标事件 (mouse events)

自 Netscape 2 起，所有浏览器均关注两个事实：当鼠标移入链接区域时触发 mouseover 事件；当用户点击该链接时触发 click 事件。随后，mouseout 事件也被添加，用于在鼠标离开链接区域时触发。由此，传统的鼠标事件“三合会”得以确立。

第三代浏览器对鼠标事件进行了扩充，添加了 dbclick 事件，并将 click 事件细分为 mousedown 和 mouseup，分别对应按下和弹起鼠标按键的操作。

此后，跟踪鼠标轨迹的 mousemove 事件也成为可能。

鼠标事件的详细讲解将在后续章节展开。

表单事件 (Form events)

表单能够识别 submit 和 reset 事件。submit 在用户提交表单时触发，reset 在重置表单时触发。其中，submit 事件是所有表单验证代码的核心：当用户提交表单时，系统会遍历表单检查是否存在错误数据；若发现错误，则停止提交并向用户发出警告。

表单还能在表单项获得或失去焦点时识别 focus 和 blur 事件，同时支持键盘事件和 click 事件。具体的兼容性情况可参考其他兼容性列表。

使用这些事件时需格外小心。虽然可以在用户离开表单项时使用 onblur 验证数据，但这通常令人困扰，因为用户在填写表单时不希望看到任何弹出的提示信息。

W3C 事件 (W3C events)

在 W3C 的 DOM 2 事件规范中，还定义了一些突变事件 (Mutation events)。这些事件在文档的 DOM 结构发生变化时触发。其中最常见的是 DOMSubtreeModified 事件，它在 DOM 发生任何变化时触发。

Mozilla 将该事件命名为 subtreemodified。此外，Mozilla 不支持其他未被提及的 W3C 事件。

微软事件 (Microsoft events)

微软定义了一系列独特的事件，其中部分非常有趣。

当用户在任何时候单击鼠标右键时，会触发 contextmenu 事件。该事件非常有用，但也常被滥用。Mozilla 也支持此事件。

在导入 XML 文件时，readystatechange 事件起到类似 load 事件的作用。当 XML 文档的 readyState 变为 4 时，表示文档加载完毕（无需深究 readyState 的具体含义，只要它有效且够用即可）。

令人惊讶的是，在 unload 事件发生之前还存在 beforeunload 事件。其设计目的是允许取消页面关闭操作，但鲜有人关注或使用它。

最后，微软还引入了 mouseenter 和 mouseleave 事件，这两个事件的功能几乎与 mouseover 和 mouseout 相同。具体细节可在鼠标事件章节中查看。

当然，上述特定事件仅被 IE 浏览器支持。

Mozilla 事件 (Mozilla events)

Mozilla 自然也有其独有的一系列事件。我尚未对此进行深入研究。

事件处理程序

无论何时触发事件，浏览器都会检测到它。浏览器通常也会执行默认行为，例如用户点击链接时跳转页面。但有时可能不会发生任何默认动作。

事件处理程序的核心在于允许执行自定义操作。你可以在事件发生时让浏览器执行你的脚本。如果编写得当，当事件发生时你的脚本便会执行。若这些脚本在逻辑上切实有用，用户也会感到愉悦。

为确保脚本在事件触发时执行，你需要对 HTML 元素的特定动作进行事件注册，示例如下：

<a href="somewhere.html" onClick="alert('I\'ve been clicked!')">

      这样脚本里的alert('I\'ve been clicked!')就会在click事件发生的时候执行。这就注册了一个事件处理程序。

继续

若要继续学习，请查阅下一章。