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 无提示关闭浏览器页面的代码
Mar 09 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 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结合飞信 免费天气预报短信
2009/05/07 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP经典面试题集锦
2015/03/19 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
python分布式环境下的限流器的示例
2017/10/26 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python实现简单俄罗斯方块
2020/03/13 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
酒店拾金不昧表扬信
2014/01/18 职场文书
五年级语文教学反思
2014/01/30 职场文书
入学生会自荐书范文
2014/02/05 职场文书
采购求职信
2014/03/17 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
小学师德标兵先进事迹材料
2014/05/25 职场文书
培训科主任岗位职责
2014/08/08 职场文书
群教班子对照检查材料
2014/08/26 职场文书
预备党员群众意见
2015/06/01 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS