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下就是包罗鼠标到哪去。

（编辑：河北网）

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