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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
msn上的tab功能Firefox对childNodes处理的一个BUG
Jan 21 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JavaScript的function函数详细介绍
Nov 20 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的安全
2006/10/09 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
小程序实现列表倒计时功能
2021/01/29 Javascript
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
python optparse模块使用实例
2015/04/09 Python
wxPython使用系统剪切板的方法
2015/06/16 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
python获取服务器响应cookie的实例
2018/12/28 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
如何对python的字典进行排序
2020/06/19 Python
瑞典在互联网上最大的宠物商店:Animail
2020/10/31 全球购物
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
工作时间调整通知
2015/04/24 职场文书
高中团支书竞选稿
2015/11/21 职场文书