jQuery源码分析之Event事件分析

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

         - (doc.clientTop || 0);
    }
  
    // Add which for key events
   if (!event.which && ((event.charCode || event.charCode === 0) ⑦
            ? event.charCode : event.keyCode))
      event.which = event.charCode || event.keyCode;
  
  // Add metaKey to non-Mac browsers
    if (!event.metaKey && event.ctrlKey)            ⑧
      event.metaKey = event.ctrlKey;
   // Add which for click: 1 == left; 2 == middle; 3 == right
  // Note: button is not normalized, so don't use it
    if (!event.which && event.button)             ⑨
      event.which = (event.button & 1 ? 1 : (event.button & 2
         ? 3 : (event.button & 4 ? 2 : 0)));
    return event;
},


  上面的代码①处保留原始事件的引用,同时clone原始事件。在这个clone的事件上进行包裹。②处在原始事件上运行 preventDefault 和 stopPropagation两个方法达到是否阻止默认的事件动作发生和是否停止冒泡事件事件向上传递。

   ③处是修正target个,IE中采用srcElement,同时对于文本节点事件,应该把target传到其父节点。

  ④处 relatedTarget只是对于mouseout、mouseover有用。在IE中分成了to和from两个Target变量,在mozilla中 没有分开。为了保证兼容,采用relatedTarget统一起来。

  ⑥处是进行event的坐标位置。这个是相对于page。如果页面 可以scroll,则要在其client上加上scroll。在IE中还应该减去默认的2px的body的边框。

  ⑦处是把键盘事件的按 键统一到event.which的属性上。Ext中的实现ev.charCode || ev.keyCode || 0; ⑨则是把鼠标事件的按键统一把event.which上。charCode、ev.keyCode一个是字符的按键,一个不是字符的按键。⑨处采 用&的方式来进行兼容性的处理。 Ext 通过下面三行解决兼容问题。

 var btnMap = Ext.isIE ? {1:0,4:1,2:2} : (Ext.isSafari ? {1:0,2:1,3:2} : {0:0,1:1,2:2}); this.button = e.button ? btnMap[e.button] : (e.which ? e.which-1 : -1);

   ①②③④⑤⑥⑦⑧⑨⑩

  6.2 事件的处理

  Jquery提供了一些来进行regist,remove,fire事件 的方法。

  6.2.1 Register

  对于注册事件,jquery提供了bind、one、toggle、 hover四种注册事件的方法, bind是最基本的方法。One是注册只运行一次的方法,toggle注册交替运行的方法。Hover是注册鼠标浮过的方法。

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);
       }); },