彻底搞懂DOM事件处理（零）引子

通过合理使用JavaScript，可以为网站用户提供更好的交互体验。这主要是因为JavaScript能够让网站对用户的各种操作及时做出“反馈”。这种“反馈”使网站不再只是一个静态的艺术品，而是具有着不断变化的可能。它增加了网站的趣味性，勾起了用户对网站的好奇心，从而让用户感到愉快。

而当用户感到愉快时，我们有理由相信它会愿意花费更长的时间在此逗留，或是以更高的频率访问我们的网站，甚至是将网站主动推荐给朋友。这当然是我们想要的结果，因此学会使用JavaScript对网站中用户操作添加“反馈”就变得非常重要了，而这正是我们今天将要探讨的主题 -- “DOM事件处理”。

让我们先解释一下主题中出现的关键词：DOM，事件以及事件处理：

DOM代表文档对象模型（Document Object Modal），是针对HTML和XML文档的一个API，它将页面中的元素以及元素之间的关系抽象为一个由节点对象组成的“树”状模型，以便开发者通过操作节点对象修改页面的样式，结构和内容。

事件是指用户在浏览文档中产生的各种操作，例如“点击鼠标”，“移动滚轮”，“敲击键盘上某一按键”等等。

事件处理即是指当用户在文档中触发某一事件时，开发者使用JavaScript使浏览器执行特定的代码以使网页呈现相应的行为。

了解清楚这三个概念的含义，我们就能够理解学习“DOM事件处理”的逻辑了。首先，我们会讲述浏览器如何获知用户在文档中执行了某一操作，即“捕捉事件”；其次，我们会讲述如何设置一段代码，使其当特定的事件发生时被执行，即“处理事件”；很多时候，我们的“事件处理代码”执行时需要依赖一些当事件发生时才能获取的信息（例如鼠标点击时，指针的位置），而这些信息都被封存在名为“事件对象”的对象中，这将是我们第三部分的主题；而对于各种各样的事件（“鼠标点击”，“键盘敲击某一字符”）我们当然有理由开辟一个独立的章节去深入了解“事件类型”；最后，我们还会给出一些DOM事件处理中，“提升性能”的建议。

所以现在你应该很清楚我们下面提纲的逻辑了：

1. 捕捉事件
2. 处理事件
3. 事件对象
4. 事件类型
5. 提升性能

很有条理对吧？下一章见