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 计算图片加载数量的代码
Jan 01 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
JS解析XML实例分析
Jan 30 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
ionic3 懒加载
Aug 16 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
基于Bootstrap实现城市三级联动
Nov 23 Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 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
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
vue 保留两位小数 不能直接用toFixed(2) 的解决
2020/08/07 Javascript
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
Python实现验证码识别
2020/06/15 Python
Python日志器使用方法及原理解析
2020/09/27 Python
python实现移动木板小游戏
2020/10/09 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
生产部经理岗位职责
2013/12/16 职场文书
2014年自我评价
2014/01/04 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
保护水资源的标语
2014/06/17 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python