var bubbleType = special.delegateType || type;
// type= focus/blur，  这样可以在 elem 上同时触发 focus 和 focusin 事件
if (!rfocusMorph.test(bubbleType + type)) {     cur = cur.parentNode; }event.type = i > 1 ? bubbleType : special.bindType || type;

二、 mouseenter/ mouseleave 高阶事件
mouseenter/ leave 高阶事件依赖于 special['mouseenter'].handle 方法来实现。在该方法内部，会有程序的判断逻辑，如果程序判断当前的 mouseover 事件满足特定条件，该事件就成为 mouseenter 事件，才调用对应的事件处理程序。

mouseenter/ leave 高阶事件依赖于原生的 mouseover/mouseouter 事件，如图所示：

其 handle 方法的源码如下：

 代码如下 复制代码

handle: function(event) {
    var ret,
        target = this,
        related = event.relatedTarget,
        handleObj = event.handleObj;

    // if related is outside the target. 
    // No relatedTarget if the mouse left/entered the browser window    // 如果通过 trigger('mouseenter') 或 trigger('mouseover') 也会满足条件　　 if ( !related || (related !== target && !jQuery.contains(target, related)) ) {
        event.type = handleObj.origType;          // 在执行事件处理程序前必须修正事件的类型
        ret = handleObj.handler.apply(this, arguments);
        event.type = fix;
    }

    return ret;
}// 如果这是一个高阶事件，调用高阶事件的方法。内部有判断逻辑
ret = ((jQuery.event.special[handleObj.origType] || {}).handle || handleObj.handler).apply(matched.elem, args); 
event.type = i > 1 ? bubbleType : special.bindType || type;
   
handle = (jQuery._data(cur, "events") || {})[event.type] && jQuery._data(cur, "handle");
// 高阶事件依赖于基础事件（原生事件），其结构依赖于 delegateType 或 bindType
if (handle) {
       handle.apply(cur, data);
}

观察源码我们可以发现，当通过程序触发高阶事件时，比如 trigger('mouseenter')，实际上需要触发的是对应的原生事件。因此，下面的代码的结果会令你耳目一新，因为这里绑定的 mouseenter 都会有所响应：

 代码如下 复制代码

var $inner = $('#inner');
var $outer = $('#outer');
$inner.on('mouseover', function(){
    $(this).css('backgroundColor', '#444');   
});
$inner.on('mouseenter', function(event){
    alert(event.relatedTarget);
});
$outer.on('mouseenter', function(){
    var $this = $(this);
    $this.css('backgroundColor', '#000');   
});
$("p").click(function () { $inner.trigger('mouseenter');} );

三、浏览器兼容性修正
依赖于 postDispatch 逻辑，调用 simulate() 方法实现事件的冒泡。

本文完。

除非特别声明，PHP100新闻均为原创或投稿报道，转载请注明作者及原文链接
原文地址：

上一篇：jQuery mouseenter与mouseleave 方法原理
下一篇：jquery hide(),show()方法用法详解