relatedTarget、fromElement、toElement相關元素

在發生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事件注冊了一個事件處理程序。當事件觸發式，會有一個警告框顯示鼠標移除和移入的元素信息。