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语言中的Literal Syntax特性分析
Mar 08 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
JavaScript、tab切换完整版(自动切换、鼠标移入停止、移开运行)
Jan 05 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
vue实现购物车结算功能
Jun 18 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 file_exists问题杂谈
2012/05/07 PHP
基于php无限分类的深入理解
2013/06/02 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
window.open打开窗口被拦截的快速解决方法
2016/08/04 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python文件处理
2016/02/29 Python
Python的Django框架中forms表单类的使用方法详解
2016/06/21 Python
详解Python中heapq模块的用法
2016/06/28 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python pandas库中的isnull()详解
2019/12/26 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
小学生学雷锋演讲稿
2014/04/25 职场文书
公司离职证明标准格式
2014/11/18 职场文书
军训通讯稿范文
2015/07/18 职场文书
小学入学感言
2015/08/01 职场文书
五一放假通知怎么写
2015/08/18 职场文书
javascript实现计算器功能详解流程
2021/11/01 Javascript