onmouseover/onmouseout事件--相关元素

参考：javascript高级程序设计第二版。

在发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内移到另一个元素边界之内。

对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。

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

也就是说，相关元素是触发mouseover/mouseout事件之前/之后的那个元素。

DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值；对于其他事件，这个属性的值是null。IE不支持realtedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素；在mouseout事件出发时，IE的toElement属性中保存着相关元素。可以把下面这个跨浏览器取得相关元素的方法添加到EventUtil对象中：

var EventUtil = {
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    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;
        }
    },
    getRelatedTarget: function (event) {
        if (event.relatedTarget) {
            return event.relatedTarget;
        } else if (event.toElement) {
            return event.toElement;
        } else if (event.fromElement) {
            return event.fromElement;
        } else {
            return null;
        }
    }
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mouseout", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var relatedTarget = EventUtil.getRelatedTarget(event);
    alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
});

这个例子的<div>元素的mouseout事件注册了一个事件处理程序。当事件触发式，会有一个警告框显示鼠标移除和移入的元素信息。