mouseover和mouseout事件是SPA經常用到的兩個事件，很多時候我們期望通過捕獲這兩個事件來操作目標DOM或者源DOM，但是當我們添加了事件監聽，捕獲事件控制代碼以後通過this方法或者event.target（event.srcElement）方式得到的目標DOM或者源DOM 並不是我們所期望的。尤其是當涉及到源DOM或者目標DOM內含有多級子元素時，這兩個事件的響應變得更加讓人迷惑。

之所以會產生以上情況，主要原因就是js的事件冒泡機制：當一個元素觸發了某一事件以後，該事件會逐級向上冒泡，觸發所有祖先元素所繫結的同類事件。由此不難理解，當一個元素有子元素時，我們對其繫結mouseover和mouseout事件，當滑鼠在該元素上移動時，由於冒泡機制，就會在不適宜的時候觸發事件。這裡借用其他兄弟的一段話：為了阻止mouseover和mouseout的反覆觸發，這裡要用到event物件的一個屬性relatedTarget，這個屬性就是用來判斷 mouseover和mouseout事件目標節點的相關節點的屬性。簡單的來說就是當觸發mouseover事件時，relatedTarget屬性代表的就是滑鼠剛剛離開的那個節點，當觸發mouseout事件時它代表的是滑鼠移向的那個物件。由於MSIE不支援這個屬性，不過它有代替的屬性，分別是 fromElement和toElement。

以下是一個簡單的能夠說明這兩個事件特殊處理的例子：

$('#customer_filterBox').on('mouseover', '.customer_filterCondition', function(e){
$(this).siblings().removeClass('cur')
showFilterConditionBox = $(this).attr('tar');
$('#customer_filterConditionBox').find('ul.'+showFilterConditionBox).show().siblings().hide();
});
$('#customer_filterBox').on('mouseout', '.customer_filterCondition', function(e){
var toTarg = getEvent(e).relatedTarget || getEvent(e).toElement;
if($(toTarg).parent().hasClass('customer_filterConditions')){
$('#customer_filterBox').find('.customer_filter-'+showFilterConditionBox).addClass('cur');
}
else if($(toTarg).hasClass('customer_filterCondition')){
return;
}
else{
$('#customer_filterBox').find('.customer_filterCondition').removeClass('cur');
$('#customer_filterConditionBox').find('ul').hide();
}
});
$('#customer_filterConditionBox').on('mouseout', function(e){
var toTarg = getEvent(e).relatedTarget || getEvent(e).toElement;
if($(toTarg).hasClass('customer_filterCondition') || $(toTarg).hasClass('customer_filter_condition')){
return;
}
else{
$('#customer_filterBox').find('.customer_filterCondition').removeClass('cur');
$('#customer_filterConditionBox').find('ul').hide();
}
});

以上程式碼直接截取了前段時間一個專案內的程式碼，有時間會對此處進行詳述。

這段程式碼主要是實現一個滑鼠懸浮自動切換tab的功能，dom結構如下：

<div class="customer_filterClass">
<span class="customer_filterCondition customer_filter-service" tar="service">服務包</span>
<span class="customer_filterCondition customer_filter-enterprise" tar="enterprise">企業</span>
<span class="customer_filterCondition customer_filter-community" tar="community">社群</span>
<div class="customer_filterConditionBox" id="customer_filterConditionBox">
<ul class="customer_filterConditions service" name="service"></ul>
<ul class="customer_filterConditions enterprise" name="enterprise"></ul>
<ul class="customer_filterConditions community" name="community"></ul>
</div>
</div>

此段只做提醒自己使用，其中的具體原因待有時間另寫文章解釋。