JavaScript Event学习第九章：鼠标事件

核心提示： 在我们的第一个例子里面，relatedTarget/fromElement包含一个ev3的引用，JavaScript Event学习第九章：鼠标事件(4)，在我们的第二个例子是SPAN，现在你就知道鼠标的来源了，浏览器就在这个层上注册一个mouseout事件，这个让我很不明白（鼠标依然在层里），

在我们的第一个例子里面，relatedTarget/fromElement包含一个ev3的引用，在我们的第二个例子是SPAN。现在你就知道鼠标的来源了。

跨浏览器的代码

所以如果你想在mouseover的情况下想知道鼠标从哪来，那么：

1　function　doSomething(e)　{
2　　　　　if　(!e)　var　e　=　window.event;
3　　　　　var　relTarg　=　e.relatedTarget　||　e.fromElement;
4　}

如果在mouseout的情况下想知道鼠标的去向那么：

1　function　doSomething(e)　{
2　　　　　if　(!e)　var　e　=　window.event;
3　　　　　var　relTarg　=　e.relatedTarget　||　e.toElement;
4　}

鼠标离开一个层

在一个基于层的导航菜单里面你可能需要知道鼠标什么时候离开层这样你才能把那个层关闭。所以你给这个层的onmouseout注册了一个事件处理程序。然后事件冒泡会导致当鼠标离开任意一个层的时候都会触发这个onmouseout。

--------------
|　Layer　　　　　　|.onmouseout　=　doSomething;
|　--------　　　|
|　|　Link　　|　---->　We　want　to　know　about　this　mouseout
|　|　　　　　　　　　　|　　　|
|　--------　　　|
|　--------　　　|
|　|　Link　　　|　　　|
|　|　　　　---->　|　but　not　about　this　one
|　--------　　　|
--------------
---->:　mouse　movement

另外的一个停止的方法是当你把鼠标移入这个层，然后到了一个链接上，浏览器就在这个层上注册一个mouseout事件。这个让我很不明白（鼠标依然在层里），但是所有的浏览器都没问题。

编缉推荐阅读以下文章

• JavaScript Event学习补遗：addEventSimple
• JavaScript Event学习第十一章：按键的检测
• JavaScript Event学习第十章：一些可替换的事件对
• JavaScript Event学习第八章：事件的顺序
• JavaScript Event学习第七章：事件属性
• JavaScript Event学习第六章：事件的访问
• JavaScript Event学习第五章：高级事件注册模型
• JavaScript Event学习第四章：传统的事件注册模型
• JavaScript Event学习第三章：早期的事件处理程序
• JavaScript Event学习第二章：Event