mouseover和mouseout事件的相关元素

在发生mouseover和mouseout事件时，还会涉及更多的元素，这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。对mouseover事件而言，事件的主目标获得光标元素，而相关元素就是那个失去贯标的元素。

例如：

对mouseout而言，事件的主目标是失去光标的元素，而相关的元素则是获得光标的元素

<body>
    <div style='widtyh:200px;height:200px;background:blue'></div>
</body>

如果指针一开始位于这个div上，然后这就在div上触发mouseout，相关元素就是body元素，与此同时，body元素上面就会触发mouserover事件，而相关元素变成了div

DOM通过event对象的relatedTarget属性提供相关的元素的信息，这个属性只对mouseover和mouseout事件才包含值，其他事件值为null

非标准兼容版本：

var EventUtil = {
            addHandler: function(element,type,handler){//添加事件
                if (element.addEventListener)
                {
                    element.addEventListener(type,handler,false);
                }else if (element.attachEvent)
                {
                    element.attachEvent('on'+type,handler);
                }else {
                    element['on'+type] = handler;
                }
            },
            getEvent: function(event){//获得事件对象
                return event || window.event;
            },
            getTarget: function(event){//获得事件元素
                return event.target || event.srcElement;
            },
            preventDefault: function(){//取消默认事件行为
                if (event.preventDefault)
                {
                    event.preventDefault();
                }else {
                    event.returnValue = false;
                }
            },
            removeHandler: function(element,type,handler){//取消事件
                if (element.removeEventListener)
                {
                    element.removeEventListener(type,handler,false)
                }else if (element.dettchEvent)
                {
                    element.dettchEvent('on'+type,handler);
                }else {
                    element['on'+type] = null;
                }
            },
            stopPropagation: function(event){//取消冒泡机制
                if (event.stopPropagation)
                {
                    event.stopPropagation();
                }else {
                    event.cancleBubble = true;
                }
            },
            getRelatedTarget: function(event){
                if (event.relatedTarget)
                {
                    return event.relatedTarget;//标准下返回相关元素
                }else if (event.toElement)
                {
                    return event.toElement;//mouseout事件触发，保存相关元素
                }else if (event.fromElement)
                {
                    return event.fromElement;//mouseover事件触发，保存相关元素
                }
            }
        }

实例：

var oDiv = document.getElementById('div1');
    var oSpan = document.getElementById('span1');
    EventUtil.addHandler(oDiv,'mouseout',function(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event);
        var relatedTarget = EventUtil.getRelatedTarget(event);
        console.log('鼠标从'+target.tagName+'到'+relatedTarget.tagName);
    });