JS和JQ的event对象区别分析


Posted in Javascript onNovember 24, 2014

代码测试:

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

Javascript 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
js获取Get值的方法
Sep 29 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
JavaScript实现大数的运算
Nov 24 #Javascript
使表格的标题列可左右拉伸jquery插件封装
Nov 24 #Javascript
jQuery实现隔行背景色变色
Nov 24 #Javascript
jQuery实现统计复选框选中数量
Nov 24 #Javascript
基于jQuery实现文本框缩放以及上下移动功能
Nov 24 #Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 #Javascript
基于jQuery实现下拉框
Nov 24 #Javascript
You might like
PHP版自动生成文章摘要
2008/07/23 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
destoon安装出现Internal Server Error的解决方法
2014/06/21 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
分享PHP守护进程类
2015/12/30 PHP
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
jquery实现表格奇数偶数行不同样式(有图为证及实现代码)
2013/01/23 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
Javascript中对象继承的实现小例
2014/05/12 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
vue实现商品加减计算总价的实例代码
2018/08/12 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
在python中使用with打开多个文件的方法
2019/01/07 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
怎么快速自学python
2020/06/22 Python
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
设计部经理的岗位职责
2013/11/16 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
谢师宴邀请函
2015/02/02 职场文书
毕业生个人自荐书
2015/03/05 职场文书
《落花生》教学反思
2016/02/16 职场文书
python中取整数的几种方法
2021/11/07 Python