上一篇：
JavaScript Event学习第八章：事件的顺序鼠标事件是到目前为止最重要的事件。在这一章我将介绍一些鼠标事件的最常见的问题和技巧。
先看看都有哪些鼠标事件：mousedown,mouseup_and_click,dblclick,mousemove和mouseover mouseout。然后还会解释一下relatedTarget,fromElement和toElement这些事件属性。最后是微软的 mouseenter和mouseleave事件。
浏览器的兼容性问题，可以在
浏览器兼容性列表查看。
例子这里有一个例子。可以帮助理解下面的内容。
mousedown，mouseup，click和dblclick在这个链接上注册。可以再下面的文本框里面查看。或者在对话框里面。（请在原文里尝试：
http://www.quirksmode.org/js/events_mouse.htm）
Mousedown,mouseup,click
如果用户在一个元素上点击，那么最少三个事件会被触发，顺序是这样的：
1、mousedown,当用户在这个元素上按下鼠标键的时候
2、 mouseup，当用户在这个元素上松开鼠标键的时候
3、click，当一个mousedown和一个mouseup都在这个元素上被检测到的时候发生
通常mousedown和mouseup比click有用。有些浏览器不允许你读取onclick的事件信息。而且有时候用户用鼠标做出某些动作click事件没有跟上。
假设用户在一个链接上按下了鼠标键，然后把鼠标挪开了并且挪开后松开了鼠标键。那么这时候这个链接就仅仅发生了mousedown事件。类似的，用户在点击鼠标之后挪到了链接上，那么链接就仅有mouseup发生。这两种情况都没有click事件发生。
这是不是一个问题取决于用户的行为。但是你应该注册onmousedown/up事件，除非你就是完全想click发生。
如果你用了弹出警示框的话，浏览器可能会丢失事件发生的轨迹和发生了多少次，会引起混乱。所以最好别用那个。
Dblclickdblclick事件很少用。如果你要用的话一定不要把onclick和dblclick的事件处理程序注册在一个HTML元素上。如果两个都注册了的话你要知道用户到底干什么是一件基本上不可能的事情。
总之，当用户在一个元素上双击的时候click事件总是发生在dblclick 之前。另外，在Netscape中，第二个click总是会在dblclick之前被分开处理。不管怎样，警示框在这是很危险的。
所以保证你的click和dblclick很好的分离能避免很多复杂的事情。
Mousemove
mousemove事件运行的很好，但是需要注意的是那可能需要很多的系统资源来处理所有的mousemove事件。当用户把鼠标移动一个像素，mousemove就触发一次。就算什么都没发生，长而复杂的函数也要耗费很长的时间会影响网站的效率：所有的事情都会变慢，尤其在那些老古董上。
所以最好的办法就是当你需要的时候注册onmousemove事件，在不用的时候尽快移除：
- 1 element.onmousemove = doSomething;
- 2 // later
- 3 element.onmousemove = null;
Mouseover和mouseout再看看这个例子，换成 mouserover然后试试。这个例子只是在ev3上添加了onmouseover的事件处理程序。然而你会注意到不仅仅在ev3上会触发事件在ev4 或者span上都会触发。在Mozilla 1.3之前，当鼠标进入一个文本区域的时候都会触发。
原因当然就是事件冒泡。用户在ev4上触发了mouseover事件。在这个元素上没有onmouseover事件处理程序，但是在ev3上有。所以当事件冒泡到ev3上的时候，程序就执行了。
现在这样的设置虽然都完全正确，但是还有一个问题。首要问题就是目标。假设鼠标进入了ev4：
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- <-------- |
| | | span | | |
| | | | | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
<--------: mouse movement
现在这个事件的target/srcElement就是ev4：就是事件发生的元素，因为鼠标移动到了他上面。但是当下面的发生时候：
-----------------------------------------
| This is div id="ev3" |
| ----------------------------- |
| | This is div id="ev4" | |
| | -------- | |
| | | span | | |
| | | --------> | |
| | -------- | |
| ----------------------------- |
-----------------------------------------
-------->: mouse movement
这个事件的target/srcElement是一样的。在这一样还是鼠标进入ev4。然而你可能会当鼠标从ev3来或者从SPAN来的时候做不同的事。所以我们需要知道鼠标到底从哪来的。
JavaScript栏目的最新浏览文章：
•
实现通用 Web 图形验证码 JavaScript 脚本 API 服务 (JavaScript 脚本动态页面引用) •
《JAVASCRIPT语言精髓与编程实践》PDF下载 •
JS实现仿QQ校友的DIV模拟弹出窗口 •
Javascript 实现确认对话框的弹出层效果 •
JavaScript 实现中文转拼音 •
JavaScript: The Good Parts •
JavaScript Bible, 6th Edition •
《JavaScript语言精粹》PDF •
JavaScript Cookbook •
利用XPCOM技术实现Firefox跨平台文件操作JavaScript类 •
Google map api 标注 图层管理 •
MooTools 1.2 Beginner's Guide •
JavaScript: The Definitive Guide (5th Edition) •
Google Maps API离线开发包下载 •
Javascript滑动菜单（二） •
Javascript滑动菜单（一） 