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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
layui分页效果实现代码
May 19 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
如何利用JavaScript实现二叉搜索树
Apr 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
jquery.validate的使用说明介绍
2013/11/12 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
JavaScript中的getMilliseconds()方法使用详解
2015/06/10 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
Python 中的 else详解
2016/04/23 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python实现八皇后问题示例代码
2018/12/09 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
什么是python的函数体
2020/06/19 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
某公司.Net方向面试题
2014/04/24 面试题
人力资源管理专业应届生求职信
2014/04/24 职场文书
劳模先进事迹材料
2014/12/24 职场文书
售票员岗位职责
2015/02/15 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
教你漂亮打印Pandas DataFrames和Series
2021/05/29 Python
javascript的var与let,const之间的区别详解
2022/02/18 Javascript