第二十六课:jQuery对事件对象的修复

因为原生的event对象,在不同浏览器下,有不同的属性和方法,因此需要用jQuery进行兼容。

jQuery在这里分两步走,首先创建一个伪事件类jQuery.Event(jQuery里面自定义的事件类),这个事件类会统一处理事件对象的兼容性问题,比如:stopPropagation,preventDefault方法。然后通过jQuery.event.fix方法,针对不同的事件类型修复特定的属性。比如:mousewheel,keydown等事件类型。

jQuery.Event = function(src, props){

  if(!(this instanceof jQuery.Event)){  //如果不是new jQuery.Event(),就返回一个new出来的jQuery.Event对象

    return new jQuery.Event(src,props);

  }

  if(src && src.type){   //如果传进来的src有type属性,也就是event对象

    this.originalEvent = src; //存储原始事件,也就是event事件对象

    this.type = src.type;

    this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||src.getPregentDefault && src.getPreventDefault()) ? returntrue : return false;    //如果传进来的event对象是阻止默认事件的,那么自定义事件(jQuery.Event)的isDefaultPrevented 属性为returntrue。

  }

  else{     //如果传进来的src没有type属性,也就是不是event对象而是事件类型,比如click,就把src当做此事件的type属性值,也就是这个事件类的事件类型就是src

    this.type = src;

  }

  if(props){

    jQuery.extend(this,props);   //如果传入了一个对象,就复制它的属性到自定义事件对象中。

  }

  this.timeStamp = src && src.timeStamp || jQuery.now(); //有些浏览器下,事件对象有timeStamp属性,没有的,就用now方法,得到当前日期的毫秒数

  this[jQuery.expando] = true;    //标识这个自定义事件对象已经修正过

}

jQuery.Event.prototype = {

  preventDefault : function(){

    this.isDefaultPrevented = returnTrue;

    var e = this.originalEvent;

    if(!e){    //如果传入的不是event对象,就没有阻止事件默认行为。

      return;

    }

    if(e.preventDefault){

      e.preventDefault();

    }else{

      e.returnValue = false;  //   IE下阻止事件默认行为的代码

    }

  }, 

  stopPropagation: function(){

    this.isPropagationStopped = returnTrue;

    var e = this.originalEvent;

    if(!e){    //如果传入的不是event对象,就不用阻止冒泡行为。

      return;

    }

    if(e.stopPropagation){

      e.stopPropagation();

    }

    e.cancelBubble= true;  //   IE下阻止事件冒泡的代码

  },

  stopImmediatePropagation: function(){

    this.isImmediatePropagationStopped = returnTrue;

    this.stopPropagation();

  },

  isDefaultPrevented : returnFalse,

  isPropagationStopped  : returnFalse,

  isImmediatePropagationStopped : returnFalse

}

jQuery.event.fix也很简单,它把大部分逻辑分担给其他钩子对象了,比如:mouseHooks处理mouse事件对象的不同属性,keyHooks处理键盘事件对象的不同属性。

fix = function(event){

  if(event[jQuery.expando]){  //如果事件对象已经修正了,那么就直接返回。

    return event;

  }

  var i,prop,originalEvent = event,fixHook = jQuery.event.fixHooks[event.type] || {},  //查找此事件类型是否有相对应的钩子对象。

    copy = fixHook.props ? this.props.concat(fixHooks.props) : this.props;  //如果此钩子对象有相应的属性集合,就把这些属性集合合并到当前this.props属性集合中

  event = jQuery.Event(originalEvent);   //得到jQuery自定义事件对象

  for(i=copy.length;i;){

    prop = copy[--i];  //得到此事件对象的属性名

    event[prop] = originalEvent[prop]; //把原始对象的属性值赋给此jQuery事件对象的属性名

  }

    if(!event.target){   //IE6-8下是srcElement

    event.target = originalEvent.srcElement || document;

  }

  if(event.target.nodeType === 3){    //文本节点不能作为事件目标元素,在火狐和safari下

    event.target = event.target.parentNode;

  }

  event.metaKey = !!event.metaKey;//metaKey事件属性可返回一个布尔值,指示当事件发生时,"meta" 键是否被按下并保持住。大多数键盘上并不存在Meta键,该键存在于MIT计算机、Mac计算机或Sun公司的一些计算机键盘上。IE6-8下不支持。

  return fixHook.filter ? fixHook.filter(event,originalEvent) : event; //此事件相对应的钩子对象是否有filter方法,如果有就证明此事件对象需要进行修复处理。因此执行钩子对象的filter方法修复事件对象,然后返回这个修复后的event。

}

jQuery只修复了键盘事件和鼠标事件。

键盘事件的重点在于修复keyCode,不过W3C已经规定which才是标准属性,因此兼容性写法是:

if(event.which == null){  //如果不支持W3C的which属性。就进行修复。

  event.which = event.charCode !=null ? event.charCode : event.keyCode;   //先取事件对象的charCode属性值,如果这属性值不存在,就取event的keyCode属性值

}

鼠标事件的重点是修复pageX/pageY,relatedTarget与用于左中右键的which属性。

clientX clientY 为事件触发时鼠标在当前浏览器可视区的坐标

screenX screenY 为事件触发时鼠标在屏幕的坐标

pageX pageY 为事件触发时鼠标在整个document的坐标,IE6-8不支持。

offsetX offsetY 为事件触发时鼠标在事件源元素的坐标,不过元素的区域有很多计算方式,按规范来说,参考点是padding围成的区域(不包括滚动条和边框)的左上角。

layerX layerY 为事件发生时鼠标相当于事件源元素的offsetParent的坐标,IE6-8不支持。

x y 是IE的layerX,layerY。但是IE6-8的offsetParent存在bug,比如td元素的offsetParent总是table,不推荐使用这两个属性。

我们修复IE6-8下的pageX和pageY:

e.pageX = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);

e.pageY = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);

IE兼容模式下,窗口滚动条是出现在body中的,标准模式下,窗口滚动条出现在html。webkit下,窗口滚动条出现在body中,火狐和Opera的滚动条在html中。当窗口滚动条出现在body中时,document.body.scrollLeft是我们想要的值,而document.documentElement.scrollLeft为0,反之亦然。

在IE6-7标准模式以及IE全系列的怪异模式下,页面左上角存在2px的偏移值(表现在document.body.clientLeft,document.body.clientTop),这会导致我们在IE下取到的pageX和pageY比其他的浏览器大2px。

在IE下触发标准模式很简单,使用<!DOCTYPE HTML>在页面最前面就行了,它的前面不能有任何字符。切换成怪异模式有以下几种方法:

(1)在最前面加上非法的标签,如<ddd></ddd>

(2)在最前面加上一段文本,如ddddddd

(3)在IE6下,在最前面加上XML声明,如:<?xml version="1.0" encoding="utf-8"?>。

一般使用第一个方案。

IE在怪异模式下,页面显示用的顶级容器是body,2px 的偏移在body中表现,我们可以通过在body{ border:0},消除这个2px的偏移量。而且也可以使用html{border:0}消除。意思就是在怪异模式下,IE可以通过在body或html中设置boder:0消除2px的偏移。

那么,标准模式下,IE6-7呢?标准模式下,IE6可以通过以上方式消除2px的偏移,但是IE7不行,所以要兼容所有浏览器,就不能使用修改样式的方式。因此完美方案:

if(event.pageX ==null && event.clientX !=null){   //处理鼠标事件的

  var doc = event.target.ownerDocument || document;

  var box = document.compatMode == "BackCompat" ? doc.body : doc.documentElement; //文档模式是怪异模式,就使用body

  event.pageX = event.clientX + (box && box.scrollLeft || 0) - (box && box.clientLeft || 0);

  event.pageY = event.clientY + (box && box.scrollTop || 0) - (box && box.clientTop || 0);

}

如果不是html文档,而是xml或svg文档,就没有scrollLeft和clientLeft属性。

加油!

原文地址:https://www.cnblogs.com/chaojidan/p/4178441.html