jQuery源码分析之Event事件分析

2019-06-06 02:40:18王冬梅




  Bind中对于unload的事件,只能运行一次,其它的就采用默认的注册方式。

// 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。
// 在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
// 这个事件处理函数会接收到一个事件对象,可以通过它来阻止(浏览器)默认的行为。
// 如果既想取消默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false。

  one : function(type, data, fn) {
   var one = jQuery.event.proxy(fn || data, function(event) {
       jQuery(this).unbind(event, one);
      return (fn || data).apply(this, arguments);/this->当前的元素
       });
      return this.each(function() {
       jQuery.event.add(this, type, one, fn && data);
      });
   },

  One与bind基 本上差不多,不同的在调用jQuery.event.add时,把注册的事件处理的函数做了一个小小的调整。One调用了 jQuery.event.proxy进行了代理传入的事件处理函数。在事件触发调用这个代理的函数时,先把事件从cache中删除,再执行注册的事件函 数。这里就是闭包的应用,通过闭包得到fn注册的事件函数的引用。

//一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对 象)的方法。
//这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
//当鼠标移动到一个匹配的元素上面时,会 触发指定的第一个函数。当鼠标移出这个元素时,
/会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div 中的图像),
 //如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。
    hover : function(fnOver, fnOut) {
      return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut);
   },



  Hover则是建立在bind的基础之上。

//每次点击后依次调用函数。
toggle : function(fn) {  
var args = arguments, i = 1;
while (i < args.length)//每个函数分配GUID
    jQuery.event.proxy(fn, args[i++]);//修改后的还在args中
return this.click(jQuery.event.proxy(fn, function(event) {//分配GUID     this.lastToggle = (this.lastToggle || 0) % i;//上一个函数      event.preventDefault();//阻止缺省动作
    //执行参数中的第几个函数,apply可以采用array-like的参数
    return args[this.lastToggle++].apply(this,arguments)||false;
  }));
  },

   Toggle中参数可以是多个fn。先把它们代码生成UUID。之后调用click的方法来注册再次进行代理的callback。这个函数在事件触发时 运行,它先计算上一次是执行了参数中的那个函数。之后阻止缺省动作。之后找到下一个函数运行。