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 相关文章推荐
Javascript的闭包
Dec 31 Javascript
JavaScript对象、属性、事件手册集合方便查询
Jul 04 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
May 08 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
jQuery实现网页拼图游戏
Apr 22 jQuery
vue项目前端错误收集之sentry教程详解
May 27 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 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连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php好代码风格的阶段性总结
2016/06/25 PHP
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
javascript的事件描述
2006/09/08 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
Json解析的方法小结
2016/06/22 Javascript
JS仿hao123导航页面图片轮播效果
2016/09/01 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
django用户登录和注销的实现方法
2018/07/16 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python语法分析之字符串格式化
2019/06/13 Python
Python中字符串List按照长度排序
2019/07/01 Python
用python介绍4种常用的单链表翻转的方法小结
2020/02/24 Python
Python Celery异步任务队列使用方法解析
2020/08/10 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
西班牙英格列斯百货法国官网:El Corte Inglés法国
2017/07/09 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
Servlet方面面试题
2016/09/28 面试题
初中科学教学反思
2014/01/21 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
无故旷工检讨书
2014/01/26 职场文书
电气自动化求职信
2014/06/24 职场文书
租车协议书
2015/01/27 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
工程款催款函
2015/06/24 职场文书
导游词之重庆渣滓洞
2020/01/08 职场文书