鼠标事件的种类：

click：用户单击左键时发生（单击右键不会发生）。如果焦点在一个按钮上，并按下回车键，也会触发该事件。

dbclick：用户双击鼠标左键时发生（双击右键时不会发生）。

mousedown：用户按下任一个鼠标按键时发生。用事件对象的 button 属性可以获得按下的按键。

mouseup：用户松开一个鼠标按键时发生。用事件对象的 button 属性可以获得按下的按键。

mouseover：用户把鼠标指针移入对象时发生。此时用事件对象的 toElement 属性可以获知移入的对象，用 fromElement 属性可以获知移出的对象。

mouseout：用户把鼠标指针移出对象时发生。此时用事件对象的 toElement 属性可以获知移入的对象，用 fromElement 属性可以获知移出的对象。

mousemove：用户在对象中移动鼠标指针时发生。

事件发生顺序：

一个鼠标动作可能会触发多个事件，它们发生的时刻有所不同，你可以根据需要决定响应哪个事件。

比如单击鼠标左键，会按以下顺序发生事件：

mousedown-mouseup-click

也就是说，我们常用的 click 事件是在松开鼠标左键后才发生的。

双击鼠标左键，会按以下顺序发生事件：

mousedown-mouseup-click-mousedown-mouseup-click-dbclick

事件属性：

当发生了鼠标事件后，event 对象会填写以下属性：

1、type 属性：值为事件的名称。比如，发生了 click 事件后，event.type 的值为 "click"。

2、位置属性：包括 clientX、clientY 等，它们的值是事件发生时鼠标指针的位置，单位为像素。

3、button 属性：表示事件发生时鼠标按键的状态。（不适用于 click 和 dbclick 事件）

4、shiftKey、altKey、ctrlKey 属性：值为 true 或 false，表示事件发生时 Shift、Alt、Ctrl 键的状态。

5、srcElement 属性：值为引起事件的对象。（非IE浏览器为 target 属性）

6、fromElement、toElement 属性：只适用于 mouseover 和 mouseout 事件，值为移出和移入的对象。

举例：调整背景颜色

<div id="area"></div> <div id="colorbox" οnclick="setAreaColor('#FF7F50')"></div> <style type="text/css"> #area {     width: 200px; height: 100px; border: 1px solid #000; } #colorbox {     width: 15px; height: 15px; border: 1px solid #000; cursor: hand; margin-top: 5px; background-color: #FF7F50; } </style> <script type="text/javascript"> function setAreaColor(color) {     document.getElementById("area").style.backgroundColor = color; } </script> 效果为： 本例定义了一个调色板，当单击调色板中的色块时，可以改变对象的背景颜色。 色块用 <div> 标签定义，其中的 onclick 属性用来响应鼠标单击事件。

举例：翻转图

<img src="./image/Bomb13.jpg" οnmοuseοver="this.src='./image/Bomb15.jpg'" οnmοuseοut="this.src='./image/Bomb13.jpg'" /> 效果为： 当鼠标移到图中时显示的是另一张图片，鼠标移出时恢复原来的图片。 <img> 标签中的 onmouseover 在鼠标移入时响应，onmouseout 在鼠标移出时响应，this 表示 <img> 标签本身，修改它的 src 属性可以更换图像。 以上实现方法是有缺陷的：两张图片中，第一张图片是在打开网页时就载入了，第二张图片是在鼠标第一次移入时才会下载，这样就造成动画的不连贯。

举例：鼠标跟随

<div id="box"> <div id="abox" οnmοusemοve="moveImg(event)"> <img id="aimg" src="./image/face19.gif" /> </div> </div> <style type="text/css"> #box { height: 150px; } #abox { width: 50%; height: 150px; border: 1px solid #000; cursor: default; position: absolute; } #aimg { position: absolute; } </style> <script type="text/javascript"> function moveImg(oEvent) {     document.getElementById("aimg").style.left = oEvent.offsetX;     document.getElementById("aimg").style.top = oEvent.offsetY-50; } </script> 效果为： onmousemove 在鼠标移动时响应。图片的CSS属性设置为 position: absolute 后，它就可以用 left 和 top 来重新设置它的位置了。 注：本例使用的 offsetX、offsetY 只适用于IE浏览器，所以在其它浏览器中看不到效果。

练习

在线练习1——调色板。 把制作好的网页保存为名为“6-42-1.htm”的文件，并存放到“实验6 JavaScript应用”的文件夹中。 在线练习2——按钮菜单。 把制作好的网页保存为名为“6-42-2.htm”的文件，并存放到“实验6 JavaScript应用”的文件夹中