对原生js不熟悉看jQuery会困难很多。后续需要更多的关注下原生js

jQuery封装之后的事件触发,其中一个分支(处理普通事件)是通过:elem.addEventListener( type, eventHandle, false );来完成的。

通过这一句,为元素绑定一个事件监听器,并绑定eventHandler事件处理程序。

该事件监听程序内部调用dispatch方法处理并执行用户真正绑定到该元素上的所有事件处理程序。

相当于在所有的事件处理程序外围又包括了一个方法。

接下来看下dispatch内部做了哪些事情:

// 这里的event参数其实是一个普通的原生event对象,是从elem.addEventListener( type, eventHandle, false );中传给eventHandle之后又传给dispatch的。

dispatch: function( event ) {

  // 对event进行重新封装,前面已经看过
  event = jQuery.event.fix( event );

  var i, j, ret, matched, handleObj,

    // 存放用户绑定到该元素上的所有事件处理函数
    handlerQueue = [],
    args = core_slice.call( arguments ),

    // 这里的this指的是当前元素,取出当前元素在cache中对应的events,并找到对应的事件类型的事件处理函数
    handlers = ( data_priv.get( this, "events" ) || {} )[ event.type ] || [],

    // 到special对象中看看该事件类型是不是特殊事件
    special = jQuery.event.special[ event.type ] || {};

  // 将原event对象替换为新的event对象
  args[0] = event;

  // 将事件的代理目标指定为当前元素
  event.delegateTarget = this;

  // 不知道preDispatch是个啥东东,后面看
  if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
    return;
  }

  // 调用event的handler方法,将返回的事件处理程序组成的数组赋值给handlerQueue

  handlerQueue = jQuery.event.handlers.call( this, event, handlers );

  // 从队列中依次取出每一个事件处理程序(并且该事件没有被阻止)
  i = 0;
  while ( (matched = handlerQueue[ i++ ]) && !event.isPropagationStopped() ) {
    event.currentTarget = matched.elem;

    j = 0;

    // 需要了解handlers方法做了什么,现在不清楚handleObj是什么
    while ( (handleObj = matched.handlers[ j++ ]) && !event.isImmediatePropagationStopped() ) {

    // Triggered event must either 1) have no namespace, or
    // 2) have namespace(s) a subset or equal to those in the bound event (both can have no namespace).

      // 如果该事件没有命名空间或者该事件时命名空间的一个子集,后面的内容多需要看过handlers方法
      if ( !event.namespace_re || event.namespace_re.test( handleObj.namespace ) ) {

        event.handleObj = handleObj;
        event.data = handleObj.data;

        ret = ( (jQuery.event.special[ handleObj.origType ] || {}).handle || handleObj.handler )
          .apply( matched.elem, args );

        if ( ret !== undefined ) {
          if ( (event.result = ret) === false ) {
            event.preventDefault();
            event.stopPropagation();
          }
        }
      }
    }
  }

// Call the postDispatch hook for the mapped type
if ( special.postDispatch ) {
special.postDispatch.call( this, event );
}

return event.result;
},

(想要继续深入了解,需要画一张cache存储的events和handler的表,同时需要了解通过handler方法做了什么。才能清楚每一步的作用)

jQuery事件处理(五)的更多相关文章

  1. jQuery事件处理了解一下

    >>> JQuery 事件处理 一.事件绑定方式 1.事件绑定的快捷方式: 缺点:绑定的事件,无法取消 $("button:eq(0)").dblclick(fu ...

  2. [DOM Event Learning] Section 3 jQuery事件处理基础 on(), off()和one()方法使用

    [DOM Event Learning] Section 3 jQuery事件处理基础 on(),off()和one()方法使用   jQuery提供了简单的方法来向选择器(对应页面上的元素)绑定事件 ...

  3. jQuery事件处理(四)

    看了几天,决定整理一下jQuery事件处理的整体设计思路 1.通过add方法给选中的元素注册事件处理程序(通过缓存系统将事件储存到cache,而不是绑定到元素上) a.在存储之前,会为事件处理程序增加 ...

  4. Unit02: jQuery事件处理 、 jQuery动画

    Unit02: jQuery事件处理 . jQuery动画 jQuery实现购物车案例 <!DOCTYPE html> <html> <head> <titl ...

  5. 从零开始学 Web 之 jQuery(五)操作元素其他属性,为元素绑定事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. JQuery事件处理的注意事项

    1.jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式. 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号. jQuery 使用 ...

  7. 02-老马jQuery教程-jQuery事件处理

    1. 绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉. jQuery简单绑定事件的方式,可以让我绑定多个事件处理程序跟 ...

  8. jQuery事件处理(七)

    1.自定义事件(用户手动trigger的一般都是自定义事件) trigger: function( event, data, elem, onlyHandlers ) { var i, cur, tm ...

  9. jQuery事件处理(六)

    1.通过一步步调试的的方法观察了一下存放到cache中的事件及其处理程序的数据格式: { events : { // 根据事件类型存放添加到该元素上的所有事件,下面以click为例 click : [ ...

随机推荐

  1. 简单入门dos程序

    --1.关机程序 注意:文件保存为.bat echo 晚安了,宝贝! @echo off shutdown -s -t exist --2.快捷/批量启动程序 title "程序系统启动&q ...

  2. PLSQL导入Excel文件预览不到数据行问题

    今天,从Excel导入Oracle一些数据,在导入的过程中,遇到一个问题,Excel里面有好几万条数据,但是通过PLSQL导入向导导入Excel文件之后,在PLSQL里却预览不到数据行,只能看见标题行 ...

  3. C# byte[]保存成文件

    string path = Server.MapPath(@"\a.pdf"); FileStream fs = new FileStream(path, FileMode.Cre ...

  4. Java VM

    何时需要理解Java 虚拟机机制 一.排错 二.性能优化 字节码文件的执行流程.机制. 涉及到文件的加载机制(类加载器).执行机制(执行引擎).运行时优化(JIT运行时编译).以及内存分配与垃圾回收. ...

  5. Oracle 一个中文汉字 占用几个字节,由Oracle中字符集编码决定

    Oracle 一个中文汉字 占用几个字节,要根据Oracle中字符集编码决定 查看oracle server端字符集 select userenv('language') from dual; 如果显 ...

  6. 用外部物理路由器时与外部dhcp服务时怎样使用metadata服务(by quqi99)

    作者:张华  发表于:2015-12-31版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 ( http://blog.csdn.net/quqi99 ) 用外部 ...

  7. $(this).bind("change",itemno_change);

    如果是onchange 会出错,超过3个可能就无效.

  8. 【QT学习】信号和槽机制

    QT中发射信号使用 emit 来完成. 类要使用信号和槽机制,必须从QObject或者QObject子类继承.必须在类的定义中加上 Q_OBJECT 宏. 信号和槽连接时,参数类型必须相同. 关键字大 ...

  9. 代码记录——phase16,block36(修正后)

    加入边缘判定,<2则加2. if (x_upleft<2) x_upleft=x_upleft+2; if (y_upleft<2) y_upleft=y_upleft+2; HRE ...

  10. 如何破解银行O2O模式创新

    文/赵志宏 摩 根大通的买房APP,使客户可根据自己的位置选择合适的贷款经理:华道数据提供的卡惠APP,使客户可随时查询自己周围信用卡刷卡打折的商户信息:民生银 行的微信预约叫号功能,使客户根据可自己 ...