jQuery事件处理(五)

时间:2021-05-31 12:47:15

对原生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方法做了什么。才能清楚每一步的作用)