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

• 第一个元素
• 第二个元素

<script type="text/javascript">
function getRelatedTarget(event){
  if(event.relatedTarget){
    return event.relatedTarget;
  }else if(event.type=="mouseout" && event.toElement){
    return event.toElement;
  }else if(event.type=="mouseover" && event.fromElement){
    return event.fromElement;
  }else{
    return null;
  }
}
var oneli=document.querySelector(".format ul li:first-child");
if(oneli.addEventListener){
  oneli.addEventListener("mouseover",function(event){
    this.style.color="white";
    this.style.backgroundColor="black";
    var relatedTarget=getRelatedTarget(event);

    relatedTarget.style.color="black";
    relatedTarget.style.backgroundColor="orange";

    this.title="事件的类型: "+event.type+
                    "\r\n事件的主目标是: "+event.target+" innerHTML="+event.target.innerHTML+
                    "\r\n相关元素是: "+relatedTarget+" innerHTML="+relatedTarget.innerHTML;
  },false);
  oneli.addEventListener("mouseout",function(event){
    this.style.color="black";
    this.style.backgroundColor="orange";
    var relatedTarget=getRelatedTarget(event);

    relatedTarget.style.color="white";
    relatedTarget.style.backgroundColor="black";
    relatedTarget.title="事件的类型: "+event.type+
                    "\r\n事件的主目标是: "+event.target+" innerHTML="+event.target.innerHTML+
                    "\r\n相关元素是: "+relatedTarget+" innerHTML="+relatedTarget.innerHTML;
  },false);
}else if(oneli.attachEvent){
  oneli.attachEvent("onmouseover",function(event){
    event.srcElement.style.color="white";
    event.srcElement.style.backgroundColor="black";
    var relatedTarget=getRelatedTarget(event);

    relatedTarget.style.color="black";
    relatedTarget.style.backgroundColor="orange";
    event.srcElement.title="事件的类型: "+event.type+
                    "\r\n事件的主目标是: "+event.srcElement+" innerHTML="+event.srcElement.innerHTML+
                    "\r\n相关元素是: "+relatedTarget+" innerHTML="+relatedTarget.innerHTML;
  });
  oneli.attachEvent("onmouseout",function(event){
    event.srcElement.style.color="black";
    event.srcElement.style.backgroundColor="orange";
    var relatedTarget=getRelatedTarget(event);

    relatedTarget.style.color="white";
    relatedTarget.style.backgroundColor="black";
    relatedTarget.title="事件的类型: "+event.type+
                    "\r\n事件的主目标是: "+event.srcElement+" innerHTML="+event.srcElement.innerHTML+
                    "\r\n相关元素是: "+relatedTarget+" innerHTML="+relatedTarget.innerHTML;
  });
}
</script>

DOM通过event对象的relatedTarget属性提供了相关元素的信息。这个属性只对于mouseover和mouseout事件才包含值，对于其他事件，这个属性的值是null。IE8及之前版本不支持relatedTarget属性，但提供了保存着同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存了相关元素，在mouseout事件触发时，IE的toElement属性中保存着相关元素。(IE9支持所有这些属性)可以把上面那个跨浏览器取得相关元素的方法添加到你的日常使用库中。