《JavaScript入门经典（第6版）》——2.5　捕获鼠标事件

本节书摘来自异步社区《JavaScript入门经典（第6版）》一书中的第2章，第2.5节，作者：【美】 Phil Ballard 译者：李 军陈冀康，更多章节内容可以访问云栖社区“异步社区”公众号查看。

本节书摘来自异步社区《JavaScript入门经典（第6版）》一书中的第2章，第2.5节，作者：【美】 Phil Ballard 译者：李 军陈冀康，更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.5 捕获鼠标事件

为页面增加与用户的交互是JavaScript的基本功能之一。为此，我们需要一些机制来检测用户和程序在特定时间在做什么，比如鼠标在浏览器的什么位置，用户是否单击了鼠标或按了键盘按键，页面是否完整加载到浏览器，等等。

这些发生的事情，我们称之为事件（event），JavaScript提供了多种工具来处理事件。第9章将详细介绍事件和处理事件的高级技术，现在先来看看利用JavaScript检测用户鼠标动作的一些方法。

JavaScript使用事件处理器（event handler）来处理事件，本章介绍其中的3个：onClick、onMouseOver和onMouseOut。

2.5.1 onClick事件处理器

onClick事件处理器几乎可以用于页面上任何可见的HTML元素。实现它的方式之一是给HTML元素添加一个属性：

说明：虽然给HTML元素直接添加事件处理器是完全可行的，但现在人们已经不认为这是一种好的编程方式了。本书的第一部分仍然会使用这种方式，但后面的章节里会介绍更强大、更灵活的方式来使用事件处理器。
先来看一个范例，如程序清单2.3所示。

程序清单2.3 使用onClick事件处理器

上述HTML代码在页面的body区域添加一个按钮，并且设置了它的onclick属性。给定onclick属性的值，是一些JavaScript代码，当单击该HTML元素的时候（在这个例子中，就是按钮），我们想要运行这些JavaScript代码。当用户单击这个按钮时，onClick事件被激活（通常称为“被触发”），然后属性中所包含的JavaScript语句将会执行。

本例中只有一条语句：

alert(You clicked the button!)

图2.4是单击这个按钮得到的结果。

说明：也许有人注意到了，我们称这个事件处理器为onClick，而在HTML元素里添加它时却使用小写的onclick。这是因为HTML是不区分大小写的，而XHTML是区分大小写的，并且要求全部的HTML元素及属性名称都使用小写字母。
2.5.2 onMouseOver和onMouseOut事件处理器
如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器。

当鼠标进入页面上被某个元素所占据的区域时，会触发onMouseOver事件。而onMouserOut事件，很显然是在鼠标离开这一区域时触发的。

程序清单2.4展示了一个简单的onMouseOver事件处理过程。

程序清单2.4 使用onMouseOver事件处理器

图2.5展示了上述代码的执行结果。如果把程序清单2.4中的onmouseover替换为onmouseout，就会在鼠标离开图像区域（而不是在进入）时触发事件处理器，从而弹出警告对话框。

实践

{实现图像变化!} 利用onMouseOver和onMouseOut事件处理器可以在鼠标位于图像上方时，改变图像的显示方式。为此，当鼠标进入图像区域时，可以利用onMouseOver改变元素的src属性；而当鼠标离开时，利用onMouseOut再把这个属性修改回来。代码如程序清单2.5所示。

程序清单2.5 利用onMouseOver和onMouseOut实现图像翻滚

上述代码中出现了一些新语法，在onMouseOver和onMouseOut的JavaScript语句中，使用了关键字this。

当事件处理器是通过HTML元素的属性添加到页面时，this是指HTML元素本身。本例中就是“当前图像”，this.src就是指这个图像对象的src属性（使用了我们已经介绍过的句点表示法）。

本例中使用了两个图像：tick.gif和tick2.gif。当然可以使用任何可用的图像，但为了达到最佳效果，两个图像最好具有相同尺寸，而且文件不要太大。

使用编辑软件创建一个HTML文件，包含程序清单2.5所示的代码。可以根据实际情况修改图像文件的名称，但要确保所使用的图像和HTML文件位于同一个目录中。保存HTML文件并且在浏览器里打开它。

应该可以看到鼠标指针进入时，图像改变；当指针离开时，图像恢复原样，如图2.6所示。

说明：这曾经是图像翻滚的经典方式，而现在已经被更高效的“层叠样式表”（CSS）取代了，但它仍不失为展示onMouseOver和onMouseOut事件处理器的后一种方便的方式。

《jQuery与JavaScript入门经典》——导读 实际上，在您阅读本书期间，互联网上将新增数百万个网页。这些网页大多是使用HTML 编写的，它们使用 CSS 设置元素的样式，并使用 JavaScript 实现用户和后端服务之间的交互。
《jQuery与JavaScript入门经典》——2.8 作业 本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第2章，第2.8节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
《jQuery与JavaScript入门经典》——2.7 问与答 就Cookie调试而言，您只需知道是否启用了Cookie、浏览器设置了哪些Cookie、这些Cookie的值是什么以及它们什么时候到期。这些信息都可在Firebug的Cookies选项卡中找到。Chrome和Internet Explorer在开发人员控制台中提供了类似的功能。
《jQuery与JavaScript入门经典》——2.6 小结 您还完成了多个调试HTML、CSS和JavaScript问题的示例。您在本章学到的调试方法对阅读本书以及开发项目很有帮助，因为这些方法有助于消除常见的简单语法错误，为您节省大量时间，避免令人沮丧的情况发生。
《jQuery与JavaScript入门经典》——2.5 分析网络流量 如果单击“网络”标签上的下拉箭头，将看到一个禁用浏览器缓存的选项。为调试并修复问题而更新了Web服务器上的文件时，这个选项很有用。选择该选项后，浏览器总是从Web浏览器获取最新的内容。
《jQuery与JavaScript入门经典》——2.4 调试jQuery和JavaScript 前面介绍了如何在JavaScript控制台中查找JavaScript和其他脚本的错误。如果脚本并未导致浏览器错误，只是运行方式不符合预期，该如何办呢？Firebug集成了一个优秀的调试器，可助一臂之力。
异步社区 异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区，也是国内领先的IT专业图书社区，致力于优质学习内容的出版和分享，实现了纸书电子书的同步上架，于2015年8月上线运营。公众号【异步图书】，每日赠送异步新书。