//首先需要一个兼容的注册事件的函数
function on(o, event, handler) {
    if (window.addEventListener) {
        o.addEventListener(event, handler, false);
    }
    else {
        o.attachEvent('on' + event, function (e) {
            //这里主要是将handler内的this指向当前对象，坏处是无法删除注册事件，如果需要删除注册事件请直接
            // o.attachEvent('on' + event,handler)
            e = e || window.event;
            return handler.call(o, e);
        });
    }
}

//然后是判断触发mouseout事件的是否是该注册元素的子元素，是子元素返回false,不是返回true
function checkMouseoutTo(that, e) {
    e = e || window.event;
    // 现代浏览器是e.relatedTarget,IE下是toElement
    var parent = e.relatedTarget || event.toElement || null;
    try {
        while (parent && parent !== that) {
            parent = parent.parentNode;
        }
        return (parent !== that);
    }
    catch (e) {}
}

//判断触发mouseto事件的是否是注册元素的子元素
function checkMouseoverFrom(that, e) {
    e = e || window.event;
    var parent = e.relatedTarget || event.fromElement || null;
    try {
        while (parent && parent !== that) {
            parent = parent.parentNode;
        }
        return (parent !== that);
    }
    catch (e) {}
}

//最后是绑定mouseout和mouseover的函数，当然你也可以分别注册这两个事件
function mouseEnterLeave(o, enterCallback, leaveCallback) {
    on(o, 'mouseover', function (e) {
        if (checkMouseoverFrom(this, e)) {
            enterCallback.call(o, e);
        }
    });
    on(o, 'mouseout', function (e) {
        if (checkMouseoutTo(this, e)) {
            leaveCallback.call(o, e);
        }
    });
}

//调用方法：
var element = document.getElementById('yourelement');

function onMouseenter(e) {
    //do something when mouseenter
}

function onMouseleave(e) {
    //do something when mouseleave
}

mouseEnterLeave(element, onMouseenter, onMouseleave);