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


bind : function(type, data, fn) {
  return type == "unload" ? this.one(type, data, fn) : this
    .each(function() {// fn || data, fn && data实现了data参数可有可无
         jQuery.event.add(this, type, fn || data, fn && data);
       }); },




  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。这个函数在事件触发时 运行,它先计算上一次是执行了参数中的那个函数。之后阻止缺省动作。之后找到下一个函数运行。

//为jquery对象增加常用 的事件方法
jQuery.each(
   ("blur,focus,load,resize,scroll,unload,click,dblclick,"
  + "mousedown,mouseup,mousemove,mouseover,mouseout,change,select,"
+ "submit,keydown,keypress,keyup,error").split(","),
function(i, name) {jQuery.fn[name] = function(fn) {
         return fn ? this.bind(name, fn) : this.trigger(name);
       };});

   Jquery增加了一个常用的事件处理方法,包含上面调用的click。这里可以看出这里还是调用bind进行注册。当然这里还可以通过程序实现去触发 事件。



  上面的众多方法都是注册事件,其最终都落在jQuery.event.add();来完成注册的功能。如果我们采用Dom0或DOM1 的事件方法,我们会采用elem.onclick=function(){}来为元素的某一种事件来注册处理函数。这个最大的缺点就是每个一个事件只是一 个处理函数。在dom1的方式中有改进,我们可以采用elem.addEventListener(type, handle, false)为元素的事件注册多个处理函数。

  这样的处理方式还不是很完美,如果我们只这个事件运行一次就有点麻烦了。我们要在事件的处 理函数中最后进行elem.removeEventListener来取消事件的监听。这样做可能会有事务上的问题。如果第一个事件处理函数在没有取消事 件监听之前,就再次触发了怎么办?

  还有采用浏览器的方式,它不支持自定义事件的注册和处理,还不能为多个事件注册同一个处理函数。

复制代码 代码如下:

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

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