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 相关文章推荐
最短的IE判断代码
Mar 13 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
微信小程序使用GoEasy实现websocket实时通讯
May 19 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 获取本机外网/公网IP的代码
2010/05/09 PHP
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
深入分析PHP设计模式
2020/06/15 PHP
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
React Native实现简单的登录功能(推荐)
2016/09/19 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
Python深度优先算法生成迷宫
2018/01/22 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python flask安装和命令详解
2019/04/02 Python
python Tcp协议发送和接收信息的例子
2019/07/22 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python实现自动装机功能案例分析
2020/10/22 Python
中国旅游网站:同程旅游
2016/09/11 全球购物
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
C#公司笔试题
2014/03/28 面试题
大学生创业计划书的用途
2014/01/08 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
高中开学感言
2015/08/01 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
MySQL infobright的安装步骤
2021/04/07 MySQL