JS和JQ的event对象区别分析

 更新时间:2014年11月24日 16:52:45   投稿:hebedich  
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对象大同小异,但还是有些许区别的,大家是否了解了呢

相关文章

  • 在前端中Proj4.js使用简单介绍及进阶应用

    在前端中Proj4.js使用简单介绍及进阶应用

    这篇文章主要介绍了在前端中Proj4.js使用简单介绍及进阶应用的相关资料,Proj4是一个用于处理JavaScript里的几何图形和坐标计算的库,它提供了多边形、点、线等几何对象的计算功能,需要的朋友可以参考下
    2025-01-01
  • JavaScript替换当前页面的方法

    JavaScript替换当前页面的方法

    这篇文章主要介绍了JavaScript替换当前页面的方法,涉及javascript中replace方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • javascript 获取iframe里页面中元素值的方法

    javascript 获取iframe里页面中元素值的方法

    本篇文章主要是对javascript获取iframe里页面中元素值的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • bootstrap表单按回车会自动刷新页面的解决办法

    bootstrap表单按回车会自动刷新页面的解决办法

    这篇文章主要介绍了bootstrap表单按回车会自动刷新页面的问题及解决办法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • D3.js实现柱状图的方法详解

    D3.js实现柱状图的方法详解

    相信大家都知道数据可视化就是借助图形化的手段把生硬的数据生动化,以此来展示出数据想要表达的信息,而图表是最通常的一种数据可视化手段。可全靠自己纯手动编写各种图表实在是让人头疼,各种计算各种烦。现在就为大家介绍如何用D3.js来实现柱状图。
    2016-09-09
  • 用js编写的简单的计算器代码程序

    用js编写的简单的计算器代码程序

    这篇文章主要介绍了用js编写的简单的计算器代码程序,非常具有实用性,感兴趣的小伙伴可以参考下
    2015-08-08
  • JavaScript中去掉数组中的重复值的实现方法

    JavaScript中去掉数组中的重复值的实现方法

    百度面试时问的一道题目,蛮常规的,但是当时自己的回答挺差劲的。现在总结记录下~
    2011-08-08
  • layui实现数据表格隐藏列的示例

    layui实现数据表格隐藏列的示例

    今天小编就为大家分享一篇layui实现数据表格隐藏列的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • javascript实现简单放大镜效果

    javascript实现简单放大镜效果

    这篇文章主要为大家详细介绍了javascript实现简单放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js-穷举法 (y0h)

    js-穷举法 (y0h)

    js-穷举法 (y0h)...
    2006-09-09

最新评论