JavaScript入门经典（第7版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.5 捕获鼠标事件

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

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

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

2.5.1 onClick事件处理器

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

onclick=" ...some JavaScript code... "

说明：给HTML元素添加事件处理器

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

先来看一个范例，如程序清单2.3所示。


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

<!DOCTYPE html>
<html>
<head>
    <title>onClick Demo</title>
</head>
<body>
    <input type="button" onclick="alert(′You clicked the button!′)" value="Click Me" />
</body>
</html>

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

本例中只有一条语句：

alert(′You clicked the button!′)

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

图2.4 使用onClick事件处理器

说明：区分大小写

也许有人注意到了，我们称这个事件处理器为onClick，而在HTML元素里添加它时却使用小写的onclick。这是因为HTML是不区分大小写的，而XHTML是区分大小写的，并且要求全部的HTML元素及属性名称都使用小写字母。

2.5.2 onMouseOver和onMouseOut事件处理器

如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器。

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

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


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

<!DOCTYPE html>
<html>
<head>
    <title>onMouseOver Demo</title>
</head>
<body>
    <img src="image1.png" alt="image 1" onmouseover="alert(′You entered the image!′)" />
</body>
</html>

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

图2.5 使用onMouseOver事件处理器

实践


实现图像翻滚

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


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

<!DOCTYPE html>
<html>
<head>
    <title>OnMouseOver Demo</title>
</head>
<body>
    <img src="tick.gif" alt="tick" onmouseover="this.src=′tick2.gif′;"
    onmouseout="this.src=′tick.gif′;" />
</body>
</html>

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

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

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

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

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

图2.6 利用onMouseOver和onMouseOut实现的图像翻滚

说明：图像翻滚

这曾经是图像翻滚的经典方式，而现在被更高效的“层叠样式表”（CSS）取代了，但它仍不失为展示onMouseOver和onMouseOut事件处理器的用法的一种方便的方式。我们将在后面的学习中结合JavaScript使用CSS。

上一章目录下一章