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与CSS复习(三)
Jun 29 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
Vue.js与 ASP.NET Core 服务端渲染功能整合
Nov 16 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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
一个简单php扩展介绍与开发教程
2010/08/19 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
利用js对象弹出一个层
2008/03/26 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
JavaScript性能优化 创建文档碎片(document.createDocumentFragment)
2010/07/13 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
react实现pure render时bind(this)隐患需注意!
2017/03/09 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
javascrpt密码强度校验函数详解
2020/03/18 Javascript
js实现随机抽奖
2020/03/19 Javascript
numpy排序与集合运算用法示例
2017/12/15 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
解决python读取几千万行的大表内存问题
2018/06/26 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
django rest framework 实现用户登录认证详解
2019/07/29 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
python做接口测试的必要性
2019/11/20 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python常用运维脚本实例小结
2020/02/14 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
Python绘制数码晶体管日期
2021/02/19 Python
2015年试用期自我评价范文
2015/03/10 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python