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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
如何改进javascript代码的性能
Apr 02 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
理解JavaScript中的对象
Aug 25 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
文件上传的实现
2006/10/09 PHP
php发送post请求的三种方法
2014/02/11 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
json简单介绍
2008/06/10 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
python中range()与xrange()用法分析
2016/09/21 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
Python的UTC时间转换讲解
2019/02/26 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
Java如何格式化日期
2012/08/07 面试题
写出二分查找算法的两种实现
2013/05/13 面试题
十佳青年个人事迹材料
2014/01/28 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
客户答谢会致辞
2015/01/20 职场文书
学习雷锋精神活动总结
2015/02/06 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
Redis 限流器
2022/05/15 Redis
MySQL中order by的执行过程
2022/06/05 MySQL