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 flash激活
Oct 19 Javascript
指定js可访问其它域名的cookie的方法
Sep 18 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
js实现内置计时器
Dec 16 Javascript
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 imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python3爬取数据至mysql的方法
2018/06/26 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python如何急速下载第三方库详解
2020/11/02 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
幼儿园毕业园长感言
2014/02/24 职场文书
人事任命书范文
2014/06/04 职场文书
见习报告格式范文
2014/11/08 职场文书
电影雨中的树观后感
2015/06/15 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis