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,实现插入排序实现代码
Jul 31 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
js实现数组和对象的深浅拷贝
Sep 30 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
Mar 29 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
vue实现循环滚动列表
Jun 30 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
php查询内存信息操作示例
2019/05/09 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
载入进度条 效果
2006/07/08 Javascript
利用javascript解决图片缩放及其优化的代码
2012/05/23 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
js定时器出现第一次延迟的原因及解决方法
2021/01/04 Javascript
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python操作CouchDB的方法
2014/10/08 Python
Python虚拟环境项目实例
2017/11/20 Python
Python3.6简单反射操作示例
2018/06/14 Python
python使用matplotlib画柱状图、散点图
2019/03/18 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
学python安装的软件总结
2019/10/12 Python
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
Haggar官网:美国男装品牌
2020/02/16 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
员工年终演讲稿
2014/01/03 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
安全例会汇报材料
2014/08/23 职场文书
小学教师师德整改措施
2014/09/29 职场文书
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js