如果你浏览过早期的Web网站，或许你已经发现了这些Web站点除了能提供查阅信息之外，无其他作用可言。这样的Web站点其实是非常无聊的。那是因为Web站点没有提供人与机器的互动行为。激不起用户的兴趣。

造成这种现象的原因很简单。Web应用程序或者Web站点存应该是为了响应用户对它们所做的事情。好比，我们每天一大早起床时就想好了一天要做些什么，这样每天都有动力，也变得充实。那么在Web应用或Web网站上其实也是类似的，Web网站之后做的事情很大程度上取决于你告诉他们做什么。这样一来，Web网站会变得有趣的多。

告诉应用程序做什么的方法是让它们对已知的事件做出反应。那么在今天开始，我们就开始来学习Web应用程序或网站中的事件，即DOM事件。首先在今天这篇文章中，我们将学习到什么是事件，以及如何使用它们。

事件是什么？

事实上，你创建的所有内容都可以按照下面的语句来建模：

这样的填空题有很多种答案。第一个空格填将一些事情；第二个空格描述了人们对该事件做出的反应。比如下面这样的示例：

• 当 页面加载 时，播放一段视频
• 当 点击发生 时，提交已填好的表单
• 当 鼠标释放 时，弹出下人对话框
• 当 删除键按下 时，删除选中的图片
• 当 触摸屏幕 时，把卡片移出屏幕
• 当 文件下载发生 时，请更新进度条

这样的模型也适用于编码的世界中。而且这种模型用于事件中是非常有用的。其实事件只不过是一个信号。它告诉我们或用户发生了什么事情。这些信号在Web中，可以是鼠标点击、键盘上的按键，也可以是窗口大小被调整，甚至只是文档被加载。不过需要注意的是，这些信号可以是JavaScript中内置的任何东西，或者你为你的应用程序创建的定制的东西。回到我们的模型中，事件构成了前半部分：

事件定义了发生的事情，一个动作信号。模型的第二部分定义了模型中指定的事件做出的相应的反应：

我想，通过这样的一个事件模型，我们已经对什么是事件有了一个较清晰的概念，简单的来概述一下：

事件是您在编程时系统内的发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。

接下来，我们将围绕事件讨论一些重要的概念，并且观察它们在浏览器上是怎么工作的。

事件和JavaScript

考虑到事件的重要性，JavaScript提供了大量使用它们的特性。如果要处理事件，你需要做两件事：

• 监听事件
• 事件相应做出的反应

看上去就两步，似乎很简单，但是不要忘记了，我们在处理的是JavaScript。哪怕是走错了一步，JavaScript将会给你带来巨大的创伤。简单性只是烟雾弹。也许我说得太夸张了（因为我是JS菜鸟），但我们很快就会发现。

监听事件

在Web应用程序或Web站点中，事件就是告诉浏览器发生了什么事情。浏览器会以此为据，给予响应（事件是客户端的一种处理机制，虽然以下以JavaScript语言为例，但并不代表事件机制与JavaScript这门语言存在直接联系，联系的建立是依靠客户端来实现的，事件机制本身并不是JavaScript语言的内容）。

而客户端浏览器的交互模式的实现实际上是基于JavaScript的异步事件驱动模型编程的。维基百科是这样描述的：

事件驱动程序设计（英语：Event-driven programming）是一种电脑程序设计模型。这种模型的程序运行流程是由用户的动作（如鼠标的按键，键盘的按键动作）或者是由其他程序的消息来决定的。相对于批处理程序设计（batch programming）而言，程序运行的流程是由程序员来决定。批量的程序设计在初级程序设计教学课程上是一种方式。然而，事件驱动程序设计这种设计模型是在交互程序（Interactive program）的情况下孕育而生的

该模型可以用下面这张图来解释：

需要注意的是，很多时候你的应用程序会同时有很多事件被触发，而我们的任务是告诉应用程序只监听需要关心的事件。

在JavaScript中，监听事件是由addEventListener()函数来处理的。其使用如下的方式来给元素添加事件监听：

element.addEventListener(<event-name>, <callback>, <use-capture>);

addEventListener()函数中的参数具体含义：

• element：要监听事件的元素或对象，通常是一个DOM元素，但它也可以是document，window或任何其他刚好触发事件的对象
• event-name(string)：你想监听的事件的名称或类型。它可以是任何的标准DOM事件（click, mousedown, touchstart, transitionEnd,等等），当然也可以是你自己定义的事件名称
• callback(function)：这个回调函数会在事件触发的时候被调用。相应的事件对象，以及事件的数据，会被作为第一个参数传入这个函数。这个函数也被称为事件处理程序
• use-capture(boolean)：这个参数决定了回调函数(callback)是否在“捕获(capture)”阶段被触发

来看一个简单的示例：

document.addEventListener("click", changeColor, false);

function changeColor () {
    document.body.style.backgroundColor = '#ffc926'
}

上面的代码，addEventListener()被绑定到document对象。当监听到click事件发生时，changeColor()函数（即事件处理程序）来响应事件。changeColor()事件做的事情很简单，就是把body的background-color修改为#ffc926。

从addEventListenter()函数监听元素事件来看，整个JavaScript事件机制包含了以下几个部分。

事件目标

事件目标（Element）很好理解，就是发生事件的对象或者与该事件相关的对象。其可以是一个button，一个div，一个input，甚至可以是document或window。而其确定是需要由需求来决定的。

事件类型

在JavaScript中，定义了一系列具有实际意义的事件类型，比如：

• click：定义了单击事件
• mouseover：定义了鼠标移动到某一个元素上的事件
• mouseout：定义了鼠标移出某一个元素的事件

有关于更多的事件类型及其含义，可以点击这里查阅。

JavaSript中每一种事件类型都代表了一种不同的操作或者状态。不过不同的事件类型，浏览器对其兼容性不一，在实际使用时，需要做出对应的考量。不过，JavaScript中事件类型的划分还是有一定规则的，一般分为：

• 鼠标事件，比如mouseover、mouseout、click等
• 键盘事件，比如keydown、keypress、keyup等
• 触屏事件，比如touchstart、touchmove、touchenter等
• window事件，比如load、unload等

还有其他的事件。这里就不一一列举了。

事件处理程序

事件处理程序是事件目标在响应时指定的事件类型时需要执行的程序。比如：

function changeColor () {
    document.body.style.backgroundColor = '#ffc926'
}

changeColor()函数就是我们的事件处理程序。

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它。

addEventListener()函数中第三个参数设置为true，即为事件捕获阶段。

事件响应

正如前面所介绍的，监听事件是由addEventListener()函数来处理的。事件处理程序将处理在事件被监听到后该做什么。即，放置在事件处理程序中的任何代码都将执行。

一个简单的事例

来看一个简单的示例。比如说，当你用鼠标点击浏览器屏幕（document），改变body的背景颜色。根据前面介绍的内容，JavaScript事件机制有四个部分：

• 事件目标：document
• 事件类型：click
• 事件处理程序：changeColor()
• 事件捕获

如果换到我们文章开头的模型中来，就是这样：

那么我们可以这么写我们的代码：

document.addEventListener("click", changeColor, false);

function changeColor() {
    document.body.style.backgroundColor = "#FFC926";
}

总结

好了，如查你坚持阅读到这里，那么你对事件有了一定的了解。请记住，你有addEventListener()函数，它允许你注册一个事件处理函数。当事件监听器正在监听的事件被触发时，将调用此事件处理程序函数。

当然，我们这篇文章不仅仅是介绍addEventListener()函数，还介绍了事件的一些基本概念。主要是为了让大家对事件有初步的了解，如果你和我一样想继续深入学习DOM事件相关的知识，欢迎持续关注后续相关文章的更新。

由于自己是JavaScript初学者，如果文章中有不对之处，欢迎路过的大婶拍正。如果您觉得这篇文章对您有所帮助，欢迎打个赏，让我有足够多的动力创作更多优秀的教程。(^_^)!!!

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：https://www.w3cplus.com/javascript/dom-event-intro.html