event.currentTarget与event.target的区别介绍


Posted in Javascript onDecember 31, 2012

event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.
即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。翻译的不专业,好拗口啊,还是直接上测试代码吧:

<div id="wrapper"> 
<a href="#" id="inner">click here!</a> 
</div> 
<script type="text/javascript" src="source/jquery.js"></script> 
<script> 
$('#wrapper').click(function(e) { 
console.log('#wrapper'); 
console.log(e.currentTarget); 
console.log(e.target); 
}); 
$('#inner').click(function(e) { 
console.log('#inner'); 
console.log(e.currentTarget); 
console.log(e.target); 
}); 
/* 
以上测试输出如下: 
当点击click here!时click会向上冒泡,输出如下: 
#inner 
<a href=​"#" id=​"inner">​click here!​</a>​ 
<a href=​"#" id=​"inner">​click here!​</a>​ 
#wrapper 
<div id=​"wrapper">​…​</div>​ 
<a href=​"#" id=​"inner">​click here!​</a>​ 
当点击click here!时click会向上冒泡,输出如下: 
#wrapper 
<div id=​"wrapper">​…​</div>​ 
<div id=​"wrapper">​…​</div>​ 
*/ 
</script>
Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
JS实现放烟花效果
Mar 10 Javascript
jQuery $.data()方法使用注意细节
Dec 31 #Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 #Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 #Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 #Javascript
javascript中的缓动效果实现程序
Dec 29 #Javascript
通过正则格式化url查询字符串实现代码
Dec 28 #Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 #Javascript
You might like
PHP5中实现多态的两种方法实例分享
2014/04/21 PHP
php控制文件下载速度的方法
2015/03/24 PHP
浅谈php的优缺点
2015/07/14 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
Python while 循环使用的简单实例
2016/06/08 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python PrettyTable模块的安装与简单应用
2019/01/11 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
使用python代码进行身份证号校验的实现示例
2019/11/21 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
医学毕业生自我鉴定
2013/10/30 职场文书
银行贷款承诺书
2014/03/29 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
交通事故和解协议书
2015/01/27 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
MySQL系列之十四 MySQL的高可用实现
2021/07/02 MySQL
sql注入报错之注入原理实例解析
2022/06/10 MySQL