JS和JQ的event对象区别分析

  代码测试:

  

复制代码 代码如下:

  <div id="test"><p>test text<p></div>

  <script src="vendor/jquery-2.1.1.js"></script>

  <script>

  test.addEventListener('click', function(e){console.log(e);}, false),

  $('#test').on('click', function(e){console.log(e)});

  </script>

  结果分析:

  

复制代码 代码如下:

  js-jq-event-common:{

  altKey: false,

  bubbles: true,

  button: 0,

  cancelable: true,

  clientX: 58,

  clientY: 13,

  ctrlKey: false,

  offsetX: 50,

  offsetY: 5,

  pageX: 58,

  pageY: 13,

  screenX: 58,

  screenY: 122,

  view: Window,

  which: 1,

  type: 'click',

  timeStamp: 1407761742842,

  metaKey: false,

  relatedTarget: null,

  target: div#test /*jq-evt的target不一定是jQuery选择器匹配的元素,可能是第一个捕获事件的元素,然后向上冒泡时其中一个才是选择器匹配的元素*/

  },

  js-jq-event-diff:{

  currentTarget: null/*貌似一般都为null*/

  || div#test/*jq选择器匹配的元素在[currentTarget]属性*/,

  eventPhase: 0 || 2,

  toElement: div#test

  },

  js-event-solo:{

  x: 58,

  y: 13,

  cancelBubble: false,

  charCode: 0,

  clipboardData: undefined,

  dataTransfer: null,

  defaultPrevented: false,

  srcElement: div#test,

  fromElement: null,

  detail: 1,

  keyCode: 0,

  layerX: 58,

  layerY: 13,

  returnValue: true

  },

  jq-event-solo: {

  buttons: undefined,

  data: undefined,

  delegateTarget: div#test/*谁在监听?就是这个元素啦。*/,

  isDefaultPrevented: function,

  handleObj: Object,

  jQuery211024030584539286792: true,

  originalEvent: MouseEvent,

  shiftKey: false

  }

  body-click-delegate-event: {

  currentTarget: HTMLBodyElement,

  delegateTarget: HTMLBodyElement,

  target: HTMLDivElement

  }

  总结:

  js的event参数中,不管是target, toElement, srcElement都是指向第一个触发事件的元素(还没冒泡),而fromElement在click事件中为null,所以,你如果是设置包含很多元素的父容器parent事件,那么触发事件的很可能是这个parent的子元素。

  因此,在实际应用中,如果要引用parent,那你只能使用this了

  jq的event参数中,

  currentTarget是匹配你选择器的元素,就是你的所要元素;

  delegateTarget是在监听事件的元素,属于被委托的元素

  target同js的event参数里的target,是第一个触发事件的元素,没currentTarget有用(也不一定,比如在bodyclick事件中的应用)

  有同学可能说,你要直接引用被设备事件的元素用this就得啦,何必理解currentTarget和target呢。这个想法证明你还只是用下jQuery而已,没用过类似Backbone之类的工具。

  Backbone很多地方绑定了this,所以在它的函数中用this是不行的:

  

复制代码 代码如下:

  var view = Backbone.View.extend({

  el: document.body,

  events: {

  'click p': 'showText'     // 委托body监听p的click事件   },

  showText: function(e){

  var p = e.currentTarget;  // [currentTarget]获取选择器匹配的元素     this.log(p.innerHTML);    // 看到了吧,this并不指向p元素   },

  log: function(msg){

  console.log(msg);

  }

  });

  虽然JS,JQ中event对象大同小异,但还是有些许区别的,大家是否了解了呢