jQuery源码解析之click的事件绑定

前言：
这篇依旧长，请耐心看下去。

一、事件委托
DOM 有个 事件流 特性，所以触发 DOM 节点的时候，会经历 3 个阶段：
（1）阶段一：Capturing 事件捕获（从祖到目标）
在 事件 自上（document->html->body->xxx）而下到达目标节点的过程中，浏览器会检测 针对该事件的 监听器（用来捕获事件），并运行 捕获事件的监听器。

（2）阶段二：Target 目标
浏览器找到监听器后，就运行该监听器

（3）阶段三：Bubbling 冒泡（目标到祖）
在 事件 自下而上（document->html->body->xxx）到达目标节点的过程中，浏览器会检测 不是 针对该事件的 监听器（用来捕获事件），并运行 非捕获事件的监听器。

二、$().click()
作用：
为目标元素绑定点击事件

源码：

  // 这种写法还第一次见，将所有鼠标事件写成字符串再换成数组
  // 再一一绑定到 DOM 节点上去
  // 源码 10969 行
  jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick" +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave" +
    "change select submit keydown keypress keyup contextmenu" ).split(" "),
    function(i, name) {
      // 事件绑定
      // Handle event binding
      jQuery.fn[name] = function(data, fn) {
        return arguments.length > 0 ?
          // 如果有参数的话，就用 jQuery 的 on 绑定
          this.on(name, null, data, fn) :
          // 否则使用 trigger
          this.trigger(name);
      };
    } );

解析：
可以看到，jQuery 将所有的鼠标事件都一一列举了出来，并通过jQuery.fn[name] = function(data, fn) {xxx}

如果有参数，则是绑定事件，调用 on() 方法；
没有参数，则是调用事件，调用 trigger() 方法（trigger() 放到下篇讲）

三、$().on()
作用：
在被选元素及子元素上添加一个或多个事件处理程序

源码：

  // 绑定事件的方法
  // 源码 5812 行
  jQuery.fn.extend( {
    // 在被选元素及子元素上添加一个或多个事件处理程序
    //$().on('click',function()=<{})
    // 源码 5817 行
    on: function(types, selector, data, fn) {return on( this, types, selector, data, fn);
    },
    //xxx
    //xxx
})

最终调用的是 jQuery.on() 方法：

  // 绑定事件的 on 方法
  // 源码 5143 行
  // 目标元素，类型（click,mouseenter,focusin,xxx）, 回调函数 function(){xxx}
  function on(elem, types, selector, data, fn, one) {
    var origFn, type;
    // 这边可以不看
    // Types can be a map of types/handlers
    if (typeof types === "object") {// ( types-Object, selector, data)
      if (typeof selector !== "string") {// ( types-Object, data)
        data = data || selector;
        selector = undefined;
      }
      for (type in types) {on( elem, type, selector, data, types[ type], one );
      }
      return elem;
    }
    // 直接调用 $().on()的话会走这边
    if (data == null && fn == null) {// ( types, fn)
      //fn 赋值为 selector，即 function(){}
      fn = selector;
      // 再将 selector 置为 undefined
      // 注意这个写法，连等赋值
      data = selector = undefined;
    }
    // 调用像 $().click()的话会走这边
    else if (fn == null) {if ( typeof selector === "string") {// ( types, selector, fn)
        fn = data;
        data = undefined;
      } else {// ( types, data, fn)
        fn = data;
        data = selector;
        selector = undefined;
      }
    }

    if (fn === false) {fn = returnFalse;} else if (!fn) {return elem;}
    //one()走这里
    if (one === 1) {
      // 将 fn 赋给 origFn 后，再定义 fn
      origFn = fn;
      fn = function(event) {
        // 将绑定给目标元素的事件传给 fn，// 并通过 $().off()卸载掉
        // Can use an empty set, since event contains the info
        jQuery().off( event);
        // 在 origFn 运行一次的基础上，让 origFn 调用 fn 方法，arguments 即 event
        return origFn.apply(this, arguments);
      };
      // 让 fn 和 origFn 使用相同的 guid，这样就能移除 origFn 方法
      // Use same guid so caller can remove using origFn
      fn.guid = origFn.guid || (origFn.guid = jQuery.guid++);
    }

    return elem.each(function() {
      // 最终调动 $.event.add 方法
      jQuery.event.add(this, types, fn, data, selector);

    } );
  }

解析：
可以看到，由于将 bind()、live() 和 delegate() 都合并进 on() 后，on() 里面的情况挺复杂的，data、selector、fn 相互赋值。

注意下 if (one === 1) 这种情况，是 $().one()在 on() 里的具体实现，即调用一次 on() 后，就执行jQuery().off( event)，卸载事件。

该方法最终调用 jQuery.event.add() 方法

四、jQuery.event.add()
作用：
为目标元素添加事件

源码：

 // 源码 5235 行
  /*
 * Helper functions for managing events -- not part of the public interface.
 * Props to Dean Edwards' addEvent library for many of the ideas.
 */
  jQuery.event = {global: {},
    // 源码 5241 行
    //this, types, fn, data, selector
    add: function(elem, types, handler, data, selector) {

      var handleObjIn, eventHandle, tmp,
        events, t, handleObj,
        special, handlers, type, namespaces, origType,
        //elemData 正是目标元素 jQuery 中的 id 属性
        // 初始值是{}
        elemData = dataPriv.get(elem);
      // Don't attach events to noData or text/comment nodes (but allow plain objects)
      if (!elemData) {return;}
      // 调用者可以传入一个自定义数据对象来代替处理程序
      // Caller can pass in an object of custom data in lieu of the handler
      if (handler.handler) {
        handleObjIn = handler;
        handler = handleObjIn.handler;
        selector = handleObjIn.selector;
      }
      // 确保不正确的选择器会抛出异常
      // Ensure that invalid selectors throw exceptions at attach time
      // Evaluate against documentElement in case elem is a non-element node (e.g., document)
      if (selector) {jQuery.find.matchesSelector( documentElement, selector);
      }

      // 确保 handler 有唯一的 id
      // Make sure that the handler has a unique ID, used to find/remove it later
      if (!handler.guid) {handler.guid = jQuery.guid++;}
      // 如果事件处理没有，则置为空对象
      // Init the element's event structure and main handler, if this is the first
      // 在这里，就应经给 events 赋值了，// 注意这种写法: 赋值的同时，判断
      if (!( events = elemData.events) ) {events = elemData.events = {};
      }

      if (!( eventHandle = elemData.handle) ) {eventHandle = elemData.handle = function( e) {// 当在一个页面卸载后调用事件时，取消 jQuery.event.trigger()的第二个事件
          // Discard the second event of a jQuery.event.trigger() and
          // when an event is called after a page has unloaded

          //jQuery.event.triggered: undefined
          //e.type: click/mouseout
          return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
            // 让 elem 调用 jQuery.event.dispatch 方法，参数是 arguments
            jQuery.event.dispatch.apply(elem, arguments) : undefined;
        };
      }
      // 通过空格将多个 events 分开，一般为一个，如 click
      // Handle multiple events separated by a space
      types = (types || "").match(rnothtmlwhite) || [""];
      t = types.length;
      while (t--) {tmp = rtypenamespace.exec( types[ t] ) || [];
        //click
        type = origType = tmp[1];
        //""namespaces = (tmp[ 2] ||"" ).split(".").sort();
        // There *must* be a type, no attaching namespace-only handlers
        if (!type) {continue;}
        // 如果 event 改变了它自己的 type，就使用特殊的 event handlers
        // If event changes its type, use the special event handlers for the changed type
        special = jQuery.event.special[type] || {};
        // 如果选择器已定义，确定一个特殊 event api 的 type
        // 否则使用默认 type
        // If selector defined, determine special event api type, otherwise given type
        type = (selector ? special.delegateType : special.bindType) || type;
        // 不明白为什么在上面要先写一遍
        // Update special based on newly reset type
        special = jQuery.event.special[type] || {};
        //handleObj 会传递给所有的 event handlers
        // handleObj is passed to all event handlers
        handleObj = jQuery.extend( {
          type: type,
          origType: origType,
          data: data,
          handler: handler,
          guid: handler.guid,
          selector: selector,
          needsContext: selector && jQuery.expr.match.needsContext.test(selector),
          namespace: namespaces.join(".")
        }, handleObjIn );
        
        // 第一次绑定事件，走这里
        // Init the event handler queue if we're the first
        if (!( handlers = events[ type] ) ) {handlers = events[ type] = [];
          handlers.delegateCount = 0;

          // Only use addEventListener if the special events handler returns false
          if ( !special.setup ||
            special.setup.call(elem, data, namespaces, eventHandle) === false ) {
            // 目标元素有 addEventListener 的话，调用绑定 click 事件
            if (elem.addEventListener) {elem.addEventListener( type, eventHandle);
            }
          }
        }
        //special 的 add/handleObj.handler.guidd 的初始化处理
        if (special.add) {special.add.call( elem, handleObj);

          if (!handleObj.handler.guid) {handleObj.handler.guid = handler.guid;}
        }

        // Add to the element's handler list, delegates in front
        if (selector) {handlers.splice( handlers.delegateCount++, 0, handleObj);
        } else {handlers.push( handleObj);
        }
        // 一旦有绑定事件，全局通知
        // Keep track of which events have ever been used, for event optimization
        jQuery.event.global[type] = true;
      }

    },

...
...

}

解析：
可以看到，很多的 if 判断，都是在初始化对象，最后通过 while 循环，调用目标元素的 addEventListener 事件，也就是说，click()/on() 的本质是 element.addEventListener() 事件，前面一系列的铺垫，都是在为目标 jQuery 对象添加必要的属性。

注意写法 if (!( events = elemData.events) )，在赋值的同时，判断条件

（1）dataPriv

  // 取唯一 id
  // 源码 4361 行
  var dataPriv = new Data();

在 jQuery 对象中，有唯一 id 的属性

$("#one")

elemData = dataPriv.get(elem)

① Data()

  // 目标元素的 jQuery id
  // 源码 4209 行
  function Data() {this.expando = jQuery.expando + Data.uid++;}

② jQuery.expando

  jQuery.extend( {
    // 相当于 jQuery 为每一个元素取唯一的 id
    ///\D/g : 去掉非数字的字符
    // Unique for each copy of jQuery on the page
    // 源码 360 行
    expando: "jQuery" + (version + Math.random() ).replace(/\D/g, ""),
    ...  
    ...
})

③ Math.random()
伪随机，到小数点后 16 位

expando: "jQuery" + (version + Math.random() ).replace(/\D/g, ""),

可以看到 jQuery 的 id 是由 jQuery + 版本号 + Math.random() 生成的

关于 Math.random() 是如何生成伪随机数的请看：https://www.zhihu.com/question/22818104

（2）rtypenamespace

  var
    rkeyEvent = /^key/,
    rmouseEvent = /^(?:mouse|pointer|contextmenu|drag|drop)|click/,
    // 事件类型的命名空间
    // 举例：var arr1 = "click.aaa.bbb".match(rtypenamespace);
    //console.log(arr1);//["click.aaa.bbb", "click", "aaa.bbb", index: 0, input: "click.aaa.bbb"]
    // 源码 5131 行
    rtypenamespace = /^([^.]*)(?:\.(.+)|)/;

综上，绑定事件的本质即调用 element.addEventListener() 方法，但 jQuery 有太多的情况需要考虑了。

（完）