chrome浏览器中js模拟mouseenter事件

写在前面的废话

　　之前写监听鼠标进入事件的时候，总是很随意地用mouseenter来实现。今天在别人电脑上作测试的时候，才发现原来chrome浏览器不支持这个事件，后来翻阅了一下js高级程序设计，上面写的IE, Firefox9, Opera才支持这个事件，由于firefox9以下的用户可以忽略不计，所以可以理解为除了chrome其他浏览器都支持这个事件，可是我的chrome却用的好好的。

兼容性分析

　　我的chrome是开发者版（版本号已经是30了），已经支持了这个事件，现在可以知道的就是目前chrome28稳定版及之前版本还没支持这个事件。下面说说怎么在chrome浏览器实现这两个事件吧。

mouseover与mouseenter之区别

　　在实现这两个事件之前，首先咱分析一下mouseenter和mouseover的区别：两个都是当鼠标从元素外部移动到元素范围内时触发，不同的是mouseenter事件不冒泡，这样带来的效果就是鼠标移动到后代元素上不会触发这个元素的mouseenter事件，这样一方面可以避免事件冒泡带来的麻烦，另一方面也丢失了事件冒泡的优势比如借助事件冒泡实现事件委托以优化网页性能， 而mouseover事件恰好相反。

方法原理分析

　　好了，区别我们分析清楚了，那么我们就有办法用mouseover事件来模拟mouseenter了，那就是当事件的相关源是它的子元素也就是事件是在元素内部触发的时候不执行函数就是了，怎么样，是不是很简单。下面具体说说方法。

相关概念

　　刚才有提到一个相关源的概念。在mouseover和mouseout发生时，还会涉及更多元素，这两个事件都是将鼠标从一个元素边界移到另一个元素边界，对mouseover事件而言，事件的主目标就是鼠标移入的元素，相关目标就是失去鼠标的元素，而这个相关元素保存在event对象的relatedTarget属性里（IE8以前的版本是另外的属性，自查）。接下来可以写一个获取相关元素和一个判断包含关系的函数。

实现

var o_o = {
    //在这个对象里面定义了add_event, get_event, get_target函数对事件绑定、获取事件、获取事件源做兼容性处理，代码省略
    get_related_target: function(event){
        return event.relatedTarget || event.toElement || event.fromElement;
    },
    
    contains: function(parent, child){
        while(child){
            if(child.parentNode === parent){
                return true;
            }
            child = child.parentNode;
        }
        return false;
    }
}

　　借助这两个函数我们就可以开始实现我们的方法了。

//这里以mouseover为例，mouseout同理
o_o.add_event(elem, "mouseover", function(event){

    event = o_o.get_event(event);
    var related_elem = o_o.get_related_target(event);
    if(o_o.contains(elem, related_elem){
　　　　//执行绑定函数
　　}
});

　　上面的代码就是对mouseenter的模拟了，mouseleave的模拟同理，在此不作赘述。

　　

---

写在后面

最后祝大家情人节快乐，别人都急着写情书表白呢，而我却在写博客，哈哈。

刚开始写博客，文章中如有错误地方，欢迎批评！