jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理


Posted in Javascript onNovember 24, 2015

发现一个小点,先前没有注意的

stopPropagation: function() {
      var e = this.originalEvent;
      ...
      if ( e.stopPropagation ) {
        e.stopPropagation();
      }

jQuery重载stopPropagation函数调用的本地事件对象的stopPropagation函数阻止冒泡。也就是说,阻止冒泡的是当前节点,而不是事件源。

说到触发事件,我们第一反应是使用$(...).click()这种方式触发click事件。这种方式毫无疑问简洁明了,如果能使用这种方式推荐使用这种方式。但是如果是自定义事件呢?比如定义一个$(document).on("chuaClick","#middle",fn);这种情况怎么触发事件?这就要用到$("#middle").trigger("chuaClick")了。

a.触发事件低级API——jQuery.event.trigger

trigger函数对所有类型事件的触发提供了支持。这些事件主要分为两类:普通浏览器事件(包含带有命名空间的事件如"click.chua")、自定义事件。因为要统一处理,所以函数内部实现没有调用.click()这种方式来对普通浏览器事件做捷径处理,而是统一流程。处理过程如下

1.获取要触发的事件(传入的event可能是事件类型而不是事件对象)

event = event[ jQuery.expando ] ? event :new jQuery.Event( type, typeof event === "object" && event );

  2.修正浏览器事件(主要有修正事件源)和组合正确的事件处理参数data

if ( type.indexOf(".") >= 0 ) {
        //有命名空间的事件触发; 先取出事件处理入口函数handle()使用的事件类型type
        namespaces = type.split(".");
        type = namespaces.shift();
        namespaces.sort();
      }
      ...// 调用者可以传递jQuery.Event对象,普通对象,甚至是字符串
      event = event[ jQuery.expando ] ?
      event :
      new jQuery.Event( type, typeof event === "object" && event );
      event.isTrigger = true;
      event.namespace = namespaces.join(".");
      event.namespace_re = event.namespace ?
      new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" ) :
      null;
      // 重置result属性,避免上次的结果残留
      event.result = undefined;
      if ( !event.target ) {
        event.target = elem;
      }
      // 克隆传参data并将event放在传参data的前面,创建出事件处理入口函数的参数列表,创建后结果可能是[event,data]
      data = data == null ?
      [ event ] :
      jQuery.makeArray( data, [ event ] );

后面这段组合事件处理参数列表data在后面处理时调用

if ( handle ) {
          handle.apply( cur, data );
        }

  3.判断是否是特殊节点对象的的特殊事件,是的话特殊处理

 special = jQuery.event.special[ type ] || {};
if ( !onlyHandlers && special.trigger && special.trigger.apply( elem, data ) === false ) {


return;

}

这里面需要特殊处理的事件比较少,这里列一下

special: {
      click.trigger: function(){   // checkbox, 触发本地事件确保状态正确if ( jQuery.nodeName( this, "input" ) && this.type === "checkbox" && this.click ) {
            this.click();
            return false;
          }
      },
      focus.trigger: function() {  // 触发本地事件保证失焦/聚焦序列正确if ( this !== document.activeElement && this.focus ) {
            try {
              this.focus();
              return false;
            } catch ( e ) {
              // Support: IE<9
              // If we error on focus to hidden element (#1486, #12518),
              // let .trigger() run the handlers
            }
          }
      },
      blur.trigger: function() {if ( this === document.activeElement && this.blur ) {
            this.blur();
            return false;
          }
      }

}

4.从事件源开始遍历父节点直到Window对象,将经过的节点保存(保存到eventPath)下来备用

for ( ; cur; cur = cur.parentNode ) {
eventPath.push( cur );

tmp = cur;
}
// 将window也压入eventPath(e.g., 不是普通对象也不是断开连接的DOM)
if ( tmp === (elem.ownerDocument || document) ) {

eventPath.push( tmp.defaultView || tmp.parentWindow || window );
}

5.循环先前保存的节点,访问节点缓存,如果有对应的事件类型处理队列则取出其绑定的事件(入口函数)进行调用。

// jQuery绑定函数处理:判断节点缓存中是否保存相应的事件处理函数,如果有则执行
       handle = ( jQuery._data( cur, "events" ) || {} )[ event.type ] && jQuery._data( cur, "handle" );
       if ( handle ) {
           handle.apply( cur, data );
       }
       // 本地绑定处理
       handle = ontype && cur[ ontype ];
       if ( handle && jQuery.acceptData( cur ) && handle.apply && handle.apply( cur, data ) === false ) {
           event.preventDefault();
       }

  6. 最后处理浏览器默认事件,比如submit标签的提交表单处理。

// 如果没有人阻止默认的处理,执行之
      if ( !onlyHandlers && !event.isDefaultPrevented() ) {
        ...
      }

注意:普通事件加上命名空间仍然属于普通事件,普通调用方式依然其作用。比如$(document).on('click.chua',"#id",fn1).on("click","#id",fn2);当点击“#id”节点的时候fn1依然会被调用。触发指定命名空间事件的唯一方式是trigger:$("#id").trigger("click.chua"),此时只会调用fn1。

从第4、5个步骤可以看到trigger的另外一个巨大作用——模拟冒泡处理。后面会分析到

b. 事件特殊处理jQuery.event.special(主要有事件替代、模拟冒泡)详解

委托设计是基于事件可冒泡的。但是有些事件是不可冒泡的,有的事件在不同的浏览器上支持的冒泡情况不同。还有不同的浏览器支持的事件类型也不尽相同。这些处理主要都被放在jQuery.event.special中。jQuery.event.special对象中保存着为适配特定事件所需的变量和方法。

具体有:

delegateType / bindType (用于事件类型的调整)
setup (在某一种事件第一次绑定时调用)
add (在事件绑定时调用)
remove (在解除事件绑定时调用)
teardown (在所有事件绑定都被解除时调用)
trigger (在内部trigger事件的时候调用)
noBubble
_default
handle (在实际触发事件时调用)
preDispatch (在实际触发事件前调用)
postDispatch (在实际触发事件后调用)

看一下模拟冒泡的函数simulate

simulate: function( type, elem, event, bubble ) {
      // 构建一个新的事件以区别先前绑定的事件.
      // 新构建的事件避免阻止冒泡, 但如果模拟事件可以阻止默认操作的话,我们做同样的阻止默认操作。
      var e = jQuery.extend(
        new jQuery.Event(),
        event,
        { type: type,
          isSimulated: true,
          originalEvent: {}
        }
        );
      if ( bubble ) {
        jQuery.event.trigger( e, null, elem );
      } else {
        jQuery.event.dispatch.call( elem, e );
      }
      if ( e.isDefaultPrevented() ) {
        event.preventDefault();
      }
    }

看到没有,真正模拟冒泡函数是jQuery.event.trigger函数

special第一组

这里面涉及到冒泡处理的问题。

special: {
  load: {
    //阻止触发image.load事件冒泡到window.load
    noBubble: true
  },
  click: {
    //checkbox触发时保证状态正确
    trigger: function() {if (...) {this.click();return false;}}
  },
  focus: {
    //触发本当前节点blur/focus事件 确保队列正确
    trigger: function() {
      if ( this !== document.activeElement && this.focus ) {
        try {
          this.focus();
          return false;
        } catch ( e ) {
          // IE<9,如果我们错误的让隐藏的节点获取焦点(#1486, #12518),
          // 让.trigger()运行处理器
        }
      }
    },
    delegateType: "focusin"
  },
  blur: {
    trigger: function() {
      if ( this === document.activeElement && this.blur ) {
        this.blur();
        return false;
      }
    },
    delegateType: "focusout"
  },
  beforeunload: {
    postDispatch: function( event ) {
      //即使的returnValue等于undefined,Firefox仍然会显示警告 
      if ( event.result !== undefined ) {
        event.originalEvent.returnValue = event.result;
      }
    }
  }
}

focus/blur本来是不冒泡的,但是我们依然可以通过$(document).on('focus ','#left',fn)来绑定,是怎么做到的?我们来看jQuery的处理

第一步,将focus绑定的事件转化为focusin来绑定,focusin在W3C的标准中是冒泡的,除开火狐之外的浏览器也确实支持冒泡(火狐浏览器focusin/focusout支持冒泡的兼容后面会详解)

type = ( selector ? special.delegateType : special.bindType ) || type;

然后,根据新得到的type类型(focusin)获取新的special     

 special = jQuery.event.special[ type ] || {};

获取的special结果为

jQuery.each({ focus: "focusin", blur: "focusout" }, function( orig, fix ) {
var attaches = 0,

handler = function( event ) {


//模拟冒泡


jQuery.event.simulate( fix, event.target, jQuery.event.fix( event ), true );

};

jQuery.event.special[ fix ] = {
        setup: function() {
          if ( attaches++ === 0 ) {
            document.addEventListener( orig, handler, true );
          }
        },
        teardown: function() {
          if ( --attaches === 0 ) {
            document.removeEventListener( orig, handler, true );
          }
        }

};
});

再然后,就是绑定事件,绑定事件实际上就对focusin、focusout做了兼容处理,源码中第一个判断有special.setup.call(…)这段代码,根据上面setup函数可见第一次进入的时候实际上是通过setup函数中的document.addEventListener( orig, handler, true )绑定事件,注意:第一个参数是是orig,因为火狐不支持focusin/focusout所以jQuery使用focus/blur替代来监听事件;注意第三个参数是true,表示在事件捕获阶段触发事件。

我们知道任何浏览器捕获都是从外层到精确的节点的,所有的focusin事件都会被捕获到,然后执行handler函数(里面是jQuery.event.simulate函数,源码略)。其他事件绑定则进入if分支将事件直接绑定到elem上

if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
if ( elem.addEventListener ) {


elem.addEventListener( type, eventHandle, false ); 

} else if ( elem.attachEvent ) {


elem.attachEvent( "on" + type, eventHandle );

}
}

special第二组:mouseenter/mouseleave

//使用mouseover/out和事件时机检测创建mouseenter/leave事件
jQuery.each({
  mouseenter: "mouseover",
  mouseleave: "mouseout"
  }, function( orig, fix ) {
    jQuery.event.special[ orig ] = {
      delegateType: fix,
      bindType: fix,
      handle: function( event ) {
        var ret,
        target = this,
        related = event.relatedTarget,
        handleObj = event.handleObj;
        //对于mousenter/leave,当related在target外面的时候才调用handler
        //参考: 当鼠标离开/进入浏览器窗口的时候是没有relatedTarget的
        if ( !related || (related !== target && !jQuery.contains( target, related )) ) {
          event.type = handleObj.origType;
          ret = handleObj.handler.apply( this, arguments );
          event.type = fix;
        }
        return ret;
      }
    };
});

需要注意的是只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。对应mouseleave这样的话,mouseenter子元素不会反复触发事件,否则在IE中经常有闪烁情况发生

使用mouseover/out和事件时机检测创建mouseenter/leave事件有个关键的判断

if ( !related || (related !== target && !jQuery.contains( target, related )) )

其中!jQuery.contains( target, related )表示related在target外面。我们使用图例来解释

我们假设处理的是mouseenter事件,进入target。

鼠标从related到target,很明显related在target外面,所以当鼠标移动到target的时候满足条件,调用处理。

 

jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

现在反过来,很明显related在target里面,那么鼠标之前就处于mouseenter状态(意味着之前就进行了mouseenter处理器处理),避免重复调用当然是不进行任何处理直接返回了。

jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

我们假设处理的是mouseleave事件,离开target。

鼠标从target到related,很明显related在target里面,所以当鼠标移动到related的时候依然么有离开target,不做处理。

jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

鼠标从target到related,很明显related在target外面,所以当鼠标移动到related的时候已经离开了target的范围,做处理。

jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理

special第三组:submit和change

主要是ie下submit不能冒泡的处理

jQuery.event.special.submit主要有一下几个特征

setup

postDispatch

teardown

根据添加事件的代码可知添加事件的时候如果符合条件则会调用setup来添加事件

if ( !special.setup || special.setup.call( elem, data, namespaces, eventHandle ) === false )

jQuery在ie下模拟submit事件以click和keypress替代,只不过是添加了命名空间来区别和普通click和keypress事件。

setup: function() {
...

jQuery.event.add( this, "click._submit keypress._submit", function( e ) {


var elem = e.target,


form = jQuery.nodeName( elem, "input" ) || jQuery.nodeName( elem, "button" ) ? elem.form : undefined;



if ( form && !jQuery._data( form, "submitBubbles" ) ) {




jQuery.event.add( form, "submit._submit", function( event ) {





event._submit_bubble = true;




});




jQuery._data( form, "submitBubbles", true );



}

});
},

在事件调用过程中(dispatch)会调用postDispatch来处理

if ( special.postDispatch ) {
    special.postDispatch.call( this, event );
}
postDispatch中调用simulate完成事件处理
postDispatch: function( event ) {

// If form was submitted by the user, bubble the event up the tree

if ( event._submit_bubble ) {


delete event._submit_bubble;


if ( this.parentNode && !event.isTrigger ) {



jQuery.event.simulate( "submit", this.parentNode, event, true );


}

}
},

teardown用在删除事件绑定中

ie下change事件的处理和submit类似,事件使用beforeactivate替代来监听,处理函数变成了handle,在事件分发(dispatch)中执行代码

ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )

.apply( matched.elem, args ); 

主要源码如下

jQuery.event.special.change = {
      setup: function() {
        //rformElems = /^(?:input|select|textarea)$/i
        if ( rformElems.test( this.nodeName ) ) {
          // IE不会在check/radio失焦前触发change事件; 在属性更改后触发它的click事件
          // 在special.change.handle中会吞掉失焦触发的change事件.
          // 这里任然会在check/radio失焦后触发onchange事件.
          if ( this.type === "checkbox" || this.type === "radio" ) {
            jQuery.event.add( this, "propertychange._change", function( event ) {
              if ( event.originalEvent.propertyName === "checked" ) {
                this._just_changed = true;
              }
            });
            jQuery.event.add( this, "click._change", function( event ) {
              if ( this._just_changed && !event.isTrigger ) {
                this._just_changed = false;
              }
              // Allow triggered, simulated change events (#11500)
              jQuery.event.simulate( "change", this, event, true );
            });
          }
          return false;
        }
        // 事件代理; 懒惰模式为后代input节点添加change事件处理
        jQuery.event.add( this, "beforeactivate._change", function( e ) {
          var elem = e.target;
          if ( rformElems.test( elem.nodeName ) && !jQuery._data( elem, "changeBubbles" ) ) {
            jQuery.event.add( elem, "change._change", function( event ) {
              if ( this.parentNode && !event.isSimulated && !event.isTrigger ) {
                jQuery.event.simulate( "change", this.parentNode, event, true );
              }
            });
            jQuery._data( elem, "changeBubbles", true );
          }
        });
      },
      handle: function( event ) {
        var elem = event.target;
        // 吞掉本地单选框和复选框的change事件,我们在上面已经出发了事件
        if ( this !== elem || event.isSimulated || event.isTrigger || (elem.type !== "radio" && elem.type !== "checkbox") ) {
          return event.handleObj.handler.apply( this, arguments );
        }
      },

}

OK,到此,事件系统也告一个段落了,谢谢大家多多支持。

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
javascript工具库代码
Mar 29 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
jquery对Json的各种遍历方法总结(必看篇)
Sep 29 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
OpenLayers3实现测量功能
Sep 25 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 #Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 #Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 #Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 #Javascript
基于jquery实现日历签到功能
Sep 11 #Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 #Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 #Javascript
You might like
基于文本的搜索
2006/10/09 PHP
php操作xml
2013/10/27 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php多进程应用场景实例详解
2019/07/22 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
js中的string.format函数代码
2020/08/11 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
详解tween.js 中文使用指南
2018/01/05 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
python实现爬取千万淘宝商品的方法
2015/06/30 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
python实现操作文件(文件夹)
2019/10/31 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
PyTorch安装与基本使用详解
2020/08/31 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
奶茶专卖店创业计划书
2014/01/18 职场文书
求职毕业生自荐书
2014/02/08 职场文书
幼儿园秋游感想
2014/03/12 职场文书
青春励志演讲稿
2014/04/29 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
公司放假通知怎么写
2015/04/15 职场文书