JavaScript鼠标事件详解：mouseover、mouseout与mousemove实战

JavaScript鼠标事件概述

鼠标事件（上）

随着课程深入，能坚持下来的学习者逐渐减少。这或许是因为内容偏向理论记忆，缺乏直观的视觉反馈，导致学习兴趣下降。

实际上，网页中丰富的动态特效大多由JavaScript驱动。没有JavaScript的网页，就像缺少肌肉的人体，缺乏活力与交互能力。

然而，所有的动态效果最终都由函数控制，而控制语句则是编程的基础基础。希望大家能耐心学习。今天的课程将轻松一些，学习一些能立即看到效果的知识点。

本节主要介绍基于鼠标的事件，主要包括以下几种类型：

1. mouseover（鼠标移入）

2. mouseout（鼠标移出）

3. mousemove（鼠标移动）

4. mousedown（鼠标按下）

5. mouseup（鼠标弹起）

6. click（单击）

7. dblclick（双击）

mouseover与mouseout组合应用

通常，第1项和第2项会组合使用。当用户将鼠标指针移入超链接或其他元素时，会触发mouseover事件；而当鼠标离开该元素时，则会触发mouseout事件。

这两个事件往往成对出现，用于实现鼠标悬停时的视觉反馈。

示例代码如下：

<html>

<head>

<title>test</title>

<script language="javascript">

function text_onmouseover(){

mytext.style.fontSize="30pt";

mytext.style.color="red";

mytext.style.fontStyle="italic";

function text_onmouseout(){

mytext.style.fontSize="20pt";

mytext.style.color="blue";

mytext.style.fontStyle="normal";

</script>

</head>

<body>

<p id=mytext onmouseover="text_onmouseover()" onmouseout="text_onmouseout()">http://www.javascript.com.cn</p>

<p>看看字体样式有什么变化</p>

</body>

</html>

上述代码定义了两个函数，用于改变字体的样式。关于函数的详细用法，我们将在后续课程中深入讲解。

（注意：Internet Explorer支持页面上所有元素的mouseover和mouseout事件；但在Netscape Navigator浏览器中，仅超链接和层（Layer）支持这两个事件。）

mousemove事件与坐标获取

接下来看鼠标移动事件的示例：

<html>

<body onMousemove="micro$oftMouseMove()">

<SCRIPT LANGUAGE="JavaScript">

if (navigator.appName == 'Netscape')

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = netscapeMouseMove;

function netscapeMouseMove(e) {

if (e.screenX != document.test.x.value && e.screenY != document.test.y.value)

document.test.x.value = e.screenX;

document.test.y.value = e.screenY;

function micro$oftMouseMove() {

if (window.event.x != document.test.x.value && window.event.y != document.test.y.value)

document.test.x.value = window.event.x;

document.test.y.value = window.event.y;

</SCRIPT>

<FORM NAME="test">

X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT

TYPUE="TEXT" NAME="y" SIZE="4">

</FORM>

</body>

</html>

鼠标移动事件常用于实现鼠标跟随效果，网上有大量的此类特效可供参考。

（需要注意的是：启动此事件处理过程可能存在一个问题，即它可能会屏蔽其他事件。此外，这还会增加页面的处理时间，因此应尽量减少使用频率。）

本节内容暂且到此为止，下一节将讲解鼠标的另外4个事件。

今天的作业是：

1. 图片链接的转换（当鼠标放上去时显示一张图片，当鼠标离开时显示另一张图片）

2. 图片跟随鼠标（当鼠标移动时，有一张图片跟随鼠标一起移动）