1、自定义事件(用户手动trigger的一般都是自定义事件)

trigger: function( event, data, elem, onlyHandlers ) {

  var i, cur, tmp, bubbleType, ontype, handle, special,

    // 如果没有传入elem(绑定到那个DOM元素上的事件),则默认为document
    eventPath = [ elem || document ],

    // core_hasOwn是hasOwnProperty的替代,检测event上是否有type属性,如果有就将其赋值给type,否则说明event就是type
    type = core_hasOwn.call( event, "type" ) ? event.type : event,

    // 事件的命名空间处理
    namespaces = core_hasOwn.call( event, "namespace" ) ? event.namespace.split(".") : [];

    cur = tmp = elem = elem || document;

  // 如果元素时文本节点或者是注释则直接返回
  if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
    return;
  }

  // 排除替代事件??
  if ( rfocusMorph.test( type + jQuery.event.triggered ) ) {
    return;
  } 

  // 如果type中有.号,

  if ( type.indexOf(".") >= 0 ) {
    // 得到自定事件的所有命名空间
    namespaces = type.split(".");

    // 第一个是自定义事件的类型
    type = namespaces.shift();

    // 
    namespaces.sort();
  }

  // 如果type中没有冒号,则为type加上“on”
  ontype = type.indexOf(":") < 0 && "on" + type;

  // 看看有没有jQuery封装后的event对象的标记,如果没有则进行一下改造
  event = event[ jQuery.expando ] ?
    event :
    new jQuery.Event( type, typeof event === "object" && event );

  // 为event对象添加一些额外的属性
  event.isTrigger = onlyHandlers ? 2 : 3;
  event.namespace = namespaces.join(".");
  event.namespace_re = event.namespace ?
    new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" ) :
    null;

  // 重置event的result属性
  event.result = undefined;

  // 如果event没有target属性,则将elem赋值给它
  if ( !event.target ) {
    event.target = elem;
  }

  // 将传入的data放到数组中,并将event放到数组的第二个元素位置
  data = data == null ?
    [ event ] :
    jQuery.makeArray( data, [ event ] );

  // 看看是不是特殊事件,如果是,用特殊事件的处理方式,并在返回false时返回。
  special = jQuery.event.special[ type ] || {};
  if ( !onlyHandlers && special.trigger && special.trigger.apply( elem, data ) === false ) {
    return;
  }

  // 如果不是onlyHandlers 并且特殊事件不需要冒泡,并且不是window
  if ( !onlyHandlers && !special.noBubble && !jQuery.isWindow( elem ) ) {

    // 如果有替代事件类型,则使用替代事件类型

    bubbleType = special.delegateType || type;

    // 如果不是foucusin和foucusout事件
    if ( !rfocusMorph.test( bubbleType + type ) ) {

      // 则将当前指定为该元素的父元素
      cur = cur.parentNode;
    }

    // 遍历自身及其所有祖先元素,因为自动义事件不会向上冒泡
    for ( ; cur; cur = cur.parentNode ) {

      // 将他们推入eventpath中。
      eventPath.push( cur );
      tmp = cur;
    }

    // 如果最后一个cur是document,则事件触发到window对象上,将window推入队列
    if ( tmp === (elem.ownerDocument || document) ) {
      eventPath.push( tmp.defaultView || tmp.parentWindow || window );
    }
  }

  // 触发该元素上的所有事件处理函数
  i = 0;
  while ( (cur = eventPath[i++]) && !event.isPropagationStopped() ) {

    event.type = i > 1 ?
      bubbleType :
      special.bindType || type;

    // 拿到对应的event和handle
    handle = ( data_priv.get( cur, "events" ) || {} )[ event.type ] && data_priv.get( cur, "handle" );
    if ( handle ) {

      // 如果有handle就触发
      handle.apply( cur, data );
    }

    // 拿到原始的事件类型
    handle = ontype && cur[ ontype ];

    // 看是否需要阻止默认事件
    if ( handle && jQuery.acceptData( cur ) && handle.apply && handle.apply( cur, data ) === false ) {
      event.preventDefault();
    }
  }  

  // 事件类型可能变了,重新赋值
  event.type = type;

  // 如果不需要阻止默认事件
  if ( !onlyHandlers && !event.isDefaultPrevented() ) {

    if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&
      jQuery.acceptData( elem ) ) {

      如果存在原始类型,并且存在事件处理函数,并且不是window
      if ( ontype && jQuery.isFunction( elem[ type ] ) && !jQuery.isWindow( elem ) ) {

        // 元素上的事件赋值给临时变量
        tmp = elem[ ontype ];

        // 清空该元素上的原始事件

        if ( tmp ) {
          elem[ ontype ] = null;
        }

        // 防止再次触发
        jQuery.event.triggered = type;

        // 触发事件处理程序
        elem[ type ]();

        // 清除标记防止再次触发的标记
        jQuery.event.triggered = undefined;

        if ( tmp ) {

          // 再把原始事件写回来
          elem[ ontype ] = tmp;
        }
      }
    }
  }

  // 返回最后一个事件处理程序的返回值

  return event.result;
},

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

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

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

  2. jQuery事件处理了解一下

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

  3. jQuery事件处理(四)

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

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

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

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

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

  6. 从零开始学 Web 之 jQuery(七)事件冒泡,事件参数对象,链式编程原理

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

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

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

  8. jQuery事件处理(六)

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

  9. jQuery事件处理(五)

    对原生js不熟悉看jQuery会困难很多.后续需要更多的关注下原生js jQuery封装之后的事件触发,其中一个分支(处理普通事件)是通过:elem.addEventListener( type, e ...

随机推荐

  1. C# 无法在发送 HTTP 标头之后进行重定向

    在调试中发现错误如下: Response.Redirect引起的“无法在发送HTTP标头之后进行重定向” 跳转失败 解决方案如下: 使用js方法来跳转地址 const string url=" ...

  2. Linux free命令使用及解析

    1. 命令格式 free [参数] 2. 命令功能 free 命令显示系统使用和空闲的内存情况,包括物理内存.交互区内存(swap)和内核缓冲区内存.共享内存将被忽略 3. 命令参数 -b 以Byte ...

  3. Spring Cloud 微服务的那点事

    什么是微服务 微服务的概念源于2014年3月Martin Fowler所写的一篇文章“Microservices”. 微服务架构是一种架构模式,它提倡将单一应用程序划分成一组小的服务,服务之间互相协调 ...

  4. Css 去除浮动

    清除浮动的方法 清除浮动方法大致有两类,一类是clear:both | left | right ,另一类则是创建BFC,细分又可以分为多种. 通过在浮动元素末尾添加一个空的标签例如并设置样式为cle ...

  5. [转]CentOS虚拟机如何设置共享文件夹,并在Windows下映射网络驱动器?

    CentOS虚拟机如何设置共享文件夹,并在Windows下映射网络驱动器? 转自这里 一.为什么要这么做? 最近在做Linux下的软件开发,但又想使用Windows下的编程工具“Source Insi ...

  6. 安卓开发笔记——TabHost组件(二)(实现底部菜单导航)

    上面文章<安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航)>中提到了利用自定义View(ImageView+TextView)来设置一个底部菜单的样式 这边再补充一种更为灵 ...

  7. php 区分0和空

    能够区分出来的有2,4,6 方法 public function test(){ $test=; if($test==''){ echo '<br />在php中1,0即为空'; //被输 ...

  8. Java编程思想学习笔记——复用类

    前言 复用代码是Java众多引人注目的功能之一. 达到复用代码的方法有: 组合:新的类由现有类的对象所组成.(复用现有代码的功能,而非它的形式) 继承:按照现有类的类型组建新类.(不改变现有类的形式, ...

  9. SDK Manager.exe和AVD Manager.exe缺失,Android SDK Tools在检查java环境时卡住了,未响应卡死!

    之前安装Android Studio的时候根据提示安装了Android SDK,但是发现目录下没有SDK Manager.exe和AVD Manager.exe,导致SDK的一些操作很不方便! 不知道 ...

  10. mysql中使用show variables同时查询多个参数值?show variables的使用?

    需求描述: 今天在查mysq关于连接数的问题,想要通过一个show variables命令同时查出来多个值.在此记录下. 操作过程: 1.通过show variables语句的like可以匹配多个值或 ...