第5章　动作/响应：让页面通过事件动起来

当你听到人们谈论JavaScript，通常会在对话中听到“交互性”这个词，例如，“JavaScript使我们能够实现Web页面的交互性”。实际上他们说的是，JavaScript允许Web页面对访问者所做的某件事情做出响应：例如，把鼠标指针移动到一个导航按钮上以产生链接的菜单；选择一个单选按钮来显示一组新的表单选项；单击一幅较小的照片使得页面变暗，同时照片的一个较大版本弹出到屏幕上。所有这些Web页面可以响应的不同的访问者的操作叫做事件（event）。JavaScript是一种事件驱动的语言：没有事件，Web页面就不能对访问者做出响应，或者不能做任何真正有趣的事情。这就像台式机，在早上打开它，它不会对你有任何帮助，直到你开始单击文件、做出菜单选择并且在屏幕上移动鼠标光标。

5.1　事件

Web浏览器通过编程来识别像页面载入、某人移动鼠标光标、按下键盘按键或调整浏览器窗口大小等基本动作。发生在Web页面中的每件事情都是一个事件。要让Web页面具有交互性，可以通过编写程序来响应事件。通过这种方式，可以做到：当访问者单击鼠标的时候，＜div＞标签显示或消失；当他把鼠标移动到链接上的时候出现新的图像；或者当他单击表单的提交按钮的时候检查文本字段的内容。

事件表示某事发生的精确时刻。例如，当单击鼠标再释放鼠标按钮的那一时刻，Web浏览器会表示一个单击事件刚刚发生。Web浏览器表示一个事件发生的时刻，也就是该事件触发的时刻，即程序员按下鼠标的时刻。

当单击鼠标按钮的时候，Web浏览器实际上触发了几个事件。首先，只要按下鼠标按钮，mousedown事件就会触发，而当释放按钮的时候，mouseup事件触发，最后，click事件触发（如图5-1所示）。

图　5-1　尽管我们可能没有意识到，当输入、移动鼠标光标或单击的时候，Web浏览器经常会触发事件。events.html文件（包含在本章的教程文件中）展示了这些不同事件的作用。例如，单击一个链接（图5-1中圆圈所示）会触发mousedown、mouseup和click事件

注意：理解这些事件何时以及如何触发需要一些技巧。为了让你测试不同的事件类型，本章在教程文件中包含了一个演示Web页面。在Web浏览器中打开events.html（在testbed文件夹下）。然后，移动鼠标、单击并输入，以查看经常在Web页面上发生的一些不同事件（如图5-1所示）。

5.1.1　鼠标事件

自从Steve Jobs在1984年引入Macintosh的时候，鼠标就开始成为所有个人计算机的一种关键设备。人们使用它打开应用程序，把文件拖拽到文件夹中，从菜单选择项目甚至用鼠标去绘图。自然，Web浏览器提供了很多方式来记录访问者如何使用鼠标和Web页面交互。

·click。当单击并释放鼠标按钮时，click事件就触发了。通常会为一个链接分配click事件。例如，单击缩略图上的一个链接时可以显示该图像的一个较大版本。然而，click事件并非仅限于链接。可以让页面上的任何标签对一个事件做出响应，甚至只是在页面上的任意地方单击。

注意：click事件也可以通过键盘在链接上触发。如果跳到一个链接，并按回车键，click事件就会触发。

·dblclick。当按下并释放鼠标按钮两次，就触发了一个双击事件（dblcli-ck）。这和用来在桌面上打开一个目录或文件的操作相同。双击Web页面不是一种常见的Web冲浪操作，因此，如果使用这个事件，应该让访问者知道他们可以在哪里双击并且在这么做了之后将会发生什么。还要注意，双击事件和两个click事件是一样的，因此，不要把click和dblclick事件分配给同一个标签。否则，click的函数将会在dblclick函数运行之前运行两次。

·mousedown。mousedown事件是click事件的前一半，即单击按钮并且在释放之前的时刻。这个事件对于在页面上拖拽元素很方便。可以让访问者在Web页面上拖拽项目，就像是在自己的桌面上拖拽鼠标一样：通过单击它们（不要释放按钮）并且移动它们，然后释放按钮以放置它们。

·mouseup。mouseup事件是一个click事件的第二部分，即释放按钮的时刻。当释放一个已经拖拽的项目的时候，这个事件很方便用来做出响应。

·mouseover。当把鼠标光标移动到页面上的一个元素的时候，就触发了一个mouseover事件。可以使用这一事件把一个事件处理程序指定给一个导航按钮，并且当访问者把鼠标光标移动到按钮上的时候显示一个弹出的子菜单。（如果习惯了CSS：hover伪类，那么，你就知道这个事件是如何工作的了。）

·mouseout。把鼠标光标从一个元素移走就会触发mouseout事件。当访问者把鼠标光标从页面移开的时候，可以使用这一事件来表示，或者当鼠标光标移动到菜单之外的时候，可以隐藏弹出菜单。

·mousemove。当鼠标光标移动的时候，mousemove事件触发，这在逻辑上意味着这个事件随时触发。可以使用这个事件来记录屏幕上光标的当前位置。此外，可以把这个事件分配给页面上的一个特定的标签，例如，一个＜div＞，并且只响应在该标签中的移动。

注意：一些Web浏览器，例如Internet Explorer，支持很多事件（参见http：//msdn2.microsoft.com/en-us/library/ms533051（VS.85）.aspx），但是，大多数浏览器只是共享其中的一些事件。