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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
JS生成不重复随机数组的函数代码
Jun 10 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
PHP使用json_encode函数时不转义中文的解决方法
2014/11/12 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
简单讲解Python中的闭包
2015/08/11 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python 调用钉钉机器人的方法
2019/02/20 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
幼儿园亲子活动方案
2014/01/29 职场文书
计算机专业职业规划
2014/02/28 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
北京奥运会口号
2014/06/21 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers