HTML DOM Event 对象之（toElement、fromElement、event.srcElement、event.target）

http://www.w3school.com.cn/jsref/dom_obj_event.asp

http://blog.sina.com.cn/s/blog_9211608d01018mds.html

https://zhidao.baidu.com/question/753343911159507324.html

http://www.jb51.net/article/44571.htm

http://jsfiddle.net/kixi/u4aJh/

https://www.cnblogs.com/youxin/p/3372112.html

https://www.cnblogs.com/fullhouse/archive/2012/02/03/2337393.html

https://www.cnblogs.com/myblog1314/archive/2013/03/04/2943179.html

1. JS中event.srcElement和event.target的用法

JS中event.srcElement是IE中的用法，event.target是非IE中的用法

用法：obj = event.srcElement ? event.srcElement : event.target;

2. toElement和fromElement的用法

在IE中，当发生mouseover事件的时候，e.srcElement可以获得鼠标移入的元素，e.fromElement可以获得鼠标是从哪个元素移入的，e.toElement就是e.srcElement；

在IE中，当发生mouseout事件的时候，e.srcElement可以获得鼠标移出的元素，e.fromElement和e.srcElement是一样的，e.toElement可以获得鼠标移动到当前的元素；

3.e.target来访问，相关元素是通过e.relatedTarget
在DOM中，mouseover和mouseout所发生的元素可以通过e.target来访问，相关元素是通过e.relatedTarget来访问的（在mouseover中相当于IE的e.fromElement，在mouseout中相当于IE的e.toElement）；

4.兼容写法

如，下面是一个菜单列表中用到的程序：

$("childItems").onmouseover=function(e){
　　e=e||window.event;
　　vartarget=e.target||e.srcElement;
　　varrelatedTarget=e.relatedTarget||e.fromElement;
　　if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){
　　　　clearTimeout(timeoutId);
　　　　timeoutId=null;
　　}
}
$("childItems").onmouseout=function(e){
　　e=e||window.event;
　　vartarget=e.target||e.srcElement;
　　varrelatedTarget=e.relatedTarget||e.toElement;
　　if(!$(relatedTarget).descendantOf(this)&&$(relatedTarget)!=this){//如果relatedTarget不是ul本身或者不是ul的子元素
　　　　close();
　　}　　
}

5 event.target属性（非IE）

event.target属性的作用是获取到触发事件的元素。jQuery对其封装后，避免了W3C、IE和safari浏览器不同标准的

$(“a’).click(function(event){
alert(event.target.href); //获取触发事件的a元素的href属性值
alert(event.target.tagName); //获取触发事件的元素的标签名称
return false; //阻止链接跳转})

6 W3C在mouseover和mouseout事件中添加了relatedTarget属性（非IE）

在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target()方法来访问，相关元素是通过event.relatedTarget属性来访问的。event.relatedTarget属性在mouseover中相当于IE浏览器的event.fromElement属性，在mouseout中相当于IE浏览器的event.toElement,jQuery对其进行了封装，使之能兼容各种浏览器。

W3C在mouseover和mouseout事件中添加了relatedTarget属性。在mouseover事件中，它表示鼠标来自哪个元素，在mouseout事件中，它指向鼠标去往的那个元素。

而Microsoft添加了两个属性：
fromElement在mouseover事件中表示鼠标来自哪个元素。
toElement在mouseout事件中指向鼠标去往的那个元素。

例子：（跨浏览器的脚本）
如果你想知道鼠标来自哪个元素在mouseover事件中，你可以这样写：

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

如果你想知道鼠标去往哪个元素在mouseout事件中，你可以这样写：

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

实践例子：
http://jsfiddle.net/kixi/u4aJh/
http://blog.sina.com.cn/s/blog_9211608d01018mds.html