您好,欢迎访问一九零五行业门户网

JS和JQ的event对象区别分析_javascript技巧

代码测试:
复制代码 代码如下:
test text
结果分析:
复制代码 代码如下:
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对象大同小异,但还是有些许区别的,大家是否了解了呢
其它类似信息

推荐信息