jQuery源码分析之Event事件分析(4)


trigger : function(type, data, fn) {
return this.each(function() {
    jQuery.event.trigger(type, data, this, true, fn);
      }); },


   Trigger有三个参数,data参数是为了注册的事件函数提供了实传。如果data[0]中preventDefault存在,data[0]就可 以做为用户自定义的包裹事件的空间。Fn是可以为事件提供一个即时即用的事件处理方法。也就是在没有注册事件的情况下也可以通过传入处理函数来处理事件。 如果已经注册了,那就是在原来的事件处理函数之后执行。

  //这个方法将会触发指定的事件类型上所有绑定的处理函数。但不会 执行浏览器默认动作.
triggerHandler : function(type, data, fn) {
return this[0]&& jQuery.event.trigger(type,data,this[0],false,fn);
   },



  triggerHandle通过把jQuery.event.trigger的donative参数设为false,来阻止执行浏览器 默处理方法。它与trigger不现的一点,还在于它只是处理jquery对象的第一个元素。

  上面两个方法都调用了 jQuery.event.trigger来完成任务:

复制代码 代码如下:


trigger : function(type, data, elem, donative, extra) {
  data = jQuery.makeArray(data);//data可以为{xx:yy}
  //支持getData!这样的形式,exclusive = true表现会对add的注册的
  //事件的所有函数进行命名空间的分种类的来执行。
if (type.indexOf("!") >= 0) {             ①
    type = type.slice(0, -1);var exclusive = true;
    }
if (!elem) {// 处理全局的fire事件            ②
  if (this.global[type])
    jQuery.each(jQuery.cache, function() {
     // 从cache中找到所有注册该事件的元素,触发改事件的处理函数
      if (this.events && this.events[type])
       jQuery.event.trigger(type, data, this.handle.elem);
      });
  } else {// 处理单个元素事件的fire事件          ③
   if (elem.nodeType == 3 || elem.nodeType == 8)  return undefined;
   var val, ret, fn = jQuery.isFunction(elem[type] || null),
   // 如果data参数传进入的不是浏览器的event对象的话,event变量为true.
  //如果data参数本身是娄组,那么第一个元素不是 浏览器的event对象时为true.
  //对于event为true。即没有event传进入,先构建一个伪造的event对象存在 data[0]。
  event = !data[0] || !data[0].preventDefault;
  // 在没有传入event对象的情况下,构建伪造event对象。
  if (event) {//存到数组中的第一个             ④
     data.unshift( { type : type,target : elem,
       preventDefault : function() {},stopPropagation :
function() {}, timeStamp : now()  });
    data[0][expando] = true; // 不需要修正伪造的event对象
    }
   data[0].type = type; //防止事件名出错
  //表现会进行事件注册函数的分类(命名空间)执行。不是所有的。
    if (exclusive) data[0].exclusive = true;
  
  //与prototype等传统的处理 方式不一样,没有采用fireEvent来
  //来fire通过注册到浏览器事件中的事件处理方法。
  //这里分了三步,先fire 通过jQuery.event.add来注册的事件,这个事件
  //有可能是自定义的事件(没有注册到浏览器事件中)。
  //第二步 是fire通过elem.onclick方式注册的事件的本地处理函数
   //第三步是fire默认的事件处理方式(在本地的onclick的方式注册
   //不存在的情况下)。  
// 这里是触发通过jQuery.event.add来注册的事件,
   var handle = jQuery.data(elem, "handle");      ⑤
   if (handle)val = handle.apply(elem, data); //这里data分成多个参数
  //处理触发通过elem.onfoo=function()这样的注册本地处理方法,
  //但是是 对于links 's .click()不触发,这个不会执行通过addEvent
  //方式注册的事件处理方式。     
  if ((!fn || (jQuery.nodeName(elem, 'a') && type == "click")) ⑥
     && elem["on"+ type]&& elem["on"+type].apply(elem,data) === false)
   val = false;
//额外的函 数参数的开始几个是通过data给定的。这里会把伪造加上的event给去掉。
//它的最后一个参数是一系列的事件处理函数返回的结果,一般为 bool值
//这个函数可以根据这个结果来处理一个扫尾的工作。
  if (event) data.shift();
// 处理触发extra给定的函数处理。
  if (extra && jQuery.isFunction(extra)) {           ⑦
    ret = extra.apply(elem, val == null ? data : data.concat(val));
    //如果这个函数有返回值,那么trigger的返回值就是它的返回值
    //没有的 话就是串连的事件处理函数的最后一个返回值。一般为bool
    if (ret !== undefined)  val = ret;
    }
  // 触发默认本地事件方法,它是在没有如.onclick注册事件
  //加上前面的执行事件处理函数返回值都不为 false的情况下,才会执行。
  //它还可以通donative来控制是否执行。
  //如form中可以采用 this.submit()来提交form.
  if (fn && donative !== false && val !== false     ⑧
       && !(jQuery.nodeName(elem, 'a') && type == "click")) {
    this.triggered = true;
    try {elem[type]();  //对于一些hidden的元素,IE会报错
       } catch (e) {}
    }
  this.triggered = false;
  }
return val;
},




  Jquery的fire事件的方法与prototype中实现是完全不一样的。Ext、YUI没有提供强迫触发事件的方法。对于一般的 思维,程序来触发浏览器的事件就应该采用fireEvent或dispatchEvent方法来运行。

  但是jquery采用一种不同的 方法。对于通过jquery.event.add来注册的事件(不管是自定义的还是注册到浏览器事件),它保存在一个与元素及事件名相对应的cache 中。在浏览器的触发中,这个是没有什么作用。但是它是为了通过等程序来强迫触发时,从cache中取到对应的事件处理函数。这个时候就抛开了浏览器的事 件。在这里还可以执行一些自定义的事件函数。如⑤处。

  对于通过html的标签中如click或 elem.onclick=function(){}形式注册的事件函数。在⑥处它采用执行元素的如onclick形式的回调函数就可以。通过这种 dom0的方式只能注册一个函数。

  有的时候,如果没有onclick这样的事件处理函数,浏览器会执行默认的处理函数。如 form.submit()。⑧处可以看出对于这样的默认的事件处理,还可以通过参数donative来控制。

  程序手动强迫触发事件, 有一点问题就是event是怎么生成,就是没有浏览器生成event传入到函数中。Prototype采用了是新生成的dataavailable的事 件。这样的事件也没有什么作用。Jquery也采用fake的方式伪造一个一个事件,如④,它比prototype的事件好处在于它能通过trigger 的函数的参数来传入需要的event。Prototype则不能。

  通过上面的分析,隐隐可以看出Jquery是通过模拟浏览器的触发事 件的执行过程来构建这个trigger的函数的。先执行dom1方式(addEvent)注册的事件,再执行dom0方式注册的事件,最后看看要不要执行 默认的事件处理。

  在⑦处,我们可以看出trigger还可能通过传入回调函数和参数来完成对执行的事件处理函数的结果进行判断处理,形 成新结果通过trigger的函数返回。这在有的时候是很有用的。



  除了这些,它还能对于事件的处理函数进行分类(namespace),可以在合适的时候调用事件的不同分类的的处理函数(通过 jquery.event.add来注册)。这个分类的处理在handle实现。

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxxjp.html