首页 > 代码库 > js和jq的event对象对比和应用

js和jq的event对象对比和应用

代码测试:

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

<script src=http://www.mamicode.com/"vendor/jquery-2.1.1.js"></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
}

总结:

  • js的event参数中,不管是target, toElement, srcElement都是指向第一个触发事件的元素(还没冒泡),而fromElement在click事件中为null,所以,你如果是设置包含很多元素的父容器parent事件,那么触发事件的很可能是这个parent的子元素。
    因此,在实际应用中,如果要引用parent,那你只能使用this
  • jq的event参数中,
    • currentTarget是匹配你选择器的元素,就是你的所要元素
    • delegateTarget是在监听事件的元素,属于被委托的元素
    • target同js的event参数里的target,是第一个触发事件的元素,没currentTarget有用

有同学可能说,你要直接引用被设备事件的元素用this就得啦,何必理解currentTargettarget呢。这个想法证明你还只是用下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);
  }
});