js对mouseover和mouseout事件处理

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>

此段只做提醒自己使用，其中的具体原因待有时间另写文章解释。