JS和JQ的event对象区别分析

标签:公司介绍    日期:2018-12-17 09:50    录入:美娱国际平台注册    浏览:

  

[JS,JQ,event]JS和JQ的event对象区别分析

  

代码测试:  

  

代码如下:

  
  

test text

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

  

结果分析:  

  

代码如下:

  
  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对象大同小异,但还是有些许区别的,大家是否了解了呢  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
上一篇:主线程中本地磁盘和网络读写等耗时的操作
下一篇:没有了
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行