在前两篇文章中，我们已经介绍了事件的传递机制，以及如何防止事件冒泡和默认行为。所以，作为“事件三部曲”的最后一部，我们简单介绍一下DOM规范中提供了哪些事件。

事件的类型。浏览器中可能会发生多个事件。了解这些事件的情况和影响，是Web开发的基础。以下是一些常见事件：

界面相关事件

与界面相关的事件不一定与用户对DOM的操作相关，大多与窗口对象相关。

Load事件：在窗口对象上注册，当页面或资源成功加载时触发。请注意，从浏览器缓存加载页面或资源不会触发load事件。

Window.addeventlistener ('load '，function(event){ console . log(' load all resources ')；});Unload和beforeunload事件：与load事件相反，unload和beforeunload事件将分别在您离开页面或刷新时触发，beforeunload会弹出一个对话框，询问用户是否离开当前页面。

错误事件：

当文档或图片加载不正确时，将触发错误事件。出于可维护性的考虑，对于大多数事件的注册，我强烈建议编写“非侵入式JavaScript”，即JavaScript代码和标记的分离。只有错误事件最好写成事件：

Img=' image.jpg' on error=' this。src=' default.jpg ' '像这样，当image.jpg的图像不存在时，会立即触发一个错误事件。通过this.src将IMG的src属性替换为指定的图片，这是一个相当实用的技巧

如果错误事件是在网页加载后注册的，那么你只会看到残破图像的结果，因为错误事件不会再被触发，挂在后面的事件处理程序也是一样的。

Resize事件：浏览器窗口大小变化时触发，主要发生在window对象上。Scroll事件：当文档或文档元素滚动时触发，主要是当用户拖动滚动条时。DOMContentLoaded事件：类似于load事件，但不同的是Load事件将在网页的所有资源都被加载后触发，而DOMContentloaded事件将在DOM结构被完整读取和解析后触发，无需等待外部资源被读取。因此，可以说两个事件的监控阶段是不同的，可以用下图来说明：

正如我们在文章《通过DOM API 查找节点》中提到的，如果脚本标签放在头部。/head，会出现因为网页正文没有解析而无法选择DOM的问题吧？

Htmlhead脚本//无效文档；getElementByid(' hello ')；Text=' hello ',因为未加载文档结构；/script/head body div id=' hello '/div/body/html因此，将其更改为：

Html标题脚本文档。addevent listener(' domcontentloaded '，function(){//documentation。getElementByid ('hello ')。Text=' hello '将仅在文档结构已被分析时执行；}，假)；/script/head body div id=' hello '/div/body/html可以消除脚本标签放在头部抓不住DOM的问题。/头。

它类似于众所周知的jQuery $ (document)。就绪(处理程序)。

鼠标相关事件

Mousedown/mouseup事件3360这两个事件分别在鼠标点击一个元素的Mousedown按钮和mouseup按钮时触发。当鼠标“点击”一个元素时，触发click事件：当鼠标点击一个元素两次时，会触发dblclick事件：mouseenter/mousemove/mouseleave事件：这三个事件要放在一起看：当鼠标光标移动到一个元素中时，会先触发mouseenter事件。当鼠标光标在该元素中“移动”时，mousemove事件将被连续触发。直到鼠标光标离开。

这个元素触发了鼠标离开事件。

对于这些鼠标相关的事件，可以通过event.pageX和event.pageY属性获取当前鼠标在网页上的坐标。

键盘相关事件

常用的键盘事件有以下三种。在大多数情况下，键盘事件会被记录在输入的输入框中。

Keydown事件：当按下键盘键时触发keydown事件。按键事件：除了Shift、Fn、CapsLock，按下会触发，按下会连续触发。Keyup事件：释放键盘键时触发。如果我们同时为同一个元素绑定这三个键盘事件，那么这三个事件的执行顺序将是：

Keydownkeypresskeyup如果想知道用户此时按了哪个键，可以通过event.keyCode属性查询。相应的键码表可在此处查看：

例如，今天您想在用户在输入输入框中按下“enter”时启动submit。您可以这样做：

textbox . addevent listener(' keydown '，函数(e) {//enter的keyCode为13if(e . key code==13){ form submit()；}}，假)；这样就可以通过e.keyCode判断出用户当前按的是哪个按钮。

表单相关事件

Input事件：当input、textarea和contenteditable元素的内容发生变化时，会触发input事件。Change事件：当input、select、textarea、radio、checkbox等表单元素发生变化时触发。但与输入事件不同的是，输入事件会在输入框中输入输入内容时被触发，而改变事件只有在当前焦点离开输入框后才会被触发。提交事件：当表单提交时触发。通常，表单验证会在这一步进行。如果验证失败，将返回false。焦点事件：当一个元素被聚焦时触发。模糊事件：当元素失去焦点时触发。特别活动

Composition Event:Composition Event实际上是指三个事件：compositionstart、compositionend和compositionupdate。

在介绍合成事件之前，我们先来谈谈DOM API用来检测输入框变化的几种方式：

常见的表单输入框如：input type='text '如果要动态监控输入框中的文本变化，大多会监控keydown、keypress、keyup等键盘事件来判断值是否发生变化。但如果是通过“复制粘贴”等操作，则无法通过键盘事件来确定。

甚至在用户更改内容和焦点离开输入框之前触发change事件。

所以后来有了input事件，输入框内容发生变化时会立即触发input事件，真正解决了过去onChange和键盘相关事件功能不足带来的问题。

然而，新的问题来了！

通常有了这样的搜索框，我们会以类似于autocomplete的方式给用户搜索建议(以google为例):

如上图，输入中文时，通常需要借助注音等输入法进行拼写。

但大多数情况下，给出“音标”或“注音字”的搜索建议并没有太大意义。

这时候就需要通过Composition事件来增强输入框了。

通过组合事件，我们可以观察到用户在输入框中打开输入法编辑器(IME)时，单词组合或单词选择的状态。

Composition Events提供了三个事件供开发人员监视：compositionstart、compositionend和compositionupdate。

Compositionstart:输入法在输入框打开，拼写时触发。Compositionupdate:在输入框中打开输入法，在拼写或选词过程中改变内容时触发。Compositionend:输入法在输入框打开，完成拼写或选词，即将发送到输入框时触发。它是这样执行的：

可以看到，如果要确认用户输入完成并发送文本，可以通过compositionend进行最终确认。

自定义事件

自定义事件可以由事件构造器创建，也可以由addEventListener监控，触发时间由dispatchEvent决定。

var event=新事件(' build ')；//侦听事件elem.addeventlistener ('build '，function (e) {.}，假)；//触发事件elem . dispatch event(event)；如果要在CustomEvent中添加更多数据，可以使用自定义事件：

var event=new CustomEvent('build '，{ ' detail ':elem . dataset . time })；则事件处理程序可以由事件接收：

函数eventHandler(e){ log(' time is:' e . detail ')；}当然，浏览器提供的事件也不少。今天分享的部分主要是一些常见的事件，以及工作中实际需要特别注意的部分。

您可以在MDN的事件参考中找到大多数其他事件。

如果你觉得文章对你有些帮助，请喜欢并关注我的GitHub博客。非常感谢！