首页 > 语言 > JavaScript > 正文

JS和JQ的event对象区别分析

2024-05-06 16:10:58
字体:
来源:转载
供稿:网友
js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用,给有需要的小伙伴参考下
 
 

代码测试:

 

复制代码代码如下:

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选