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发生。

如果你用了弹出警示框的话，浏览器可能会丢失事件发生的轨迹和发生了多少次，会引起混乱。所以最好别用那个。

Dblclick
dblclick事件很少用。如果你要用的话一定不要把onclick和dblclick的事件处理程序注册在一个HTML元素上。如果两个都注册了的话你要知道用户到底干什么是一件基本上不可能的事情。

总之，当用户在一个元素上双击的时候click事件总是发生在dblclick之前。另外，在Netscape中，第二个click总是会在dblclick之前被分开处理。不管怎样，警示框在这是很危险的。

所以保证你的click和dblclick很好的分离能避免很多复杂的事情。

Mousemove
mousemove事件运行的很好，但是需要注意的是那可能需要很多的系统资源来处理所有的mousemove事件。当用户把鼠标移动一个像素，mousemove就触发一次。就算什么都没发生，长而复杂的函数也要耗费很长的时间会影响网站的效率：所有的事情都会变慢，尤其在那些老古董上。

所以最好的办法就是当你需要的时候注册onmousemove事件，在不用的时候尽快移除：

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来的时候做不同的事。所以我们需要知道鼠标到底从哪来的。

relatedTarget,fromElement,toElement
W3C把relatedTarget属性加进了mouseover和mouseout事件中。在mouseover事件下就是包括鼠标从哪来，在mouseout下就是包括鼠标到哪去。

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!