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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
jQuery find和children方法使用
Jan 31 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
原生js无缝轮播插件使用详解
Mar 09 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
一个MYSQL操作类
2006/11/16 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
splice slice区别
2006/10/09 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
Bootstrap select实现下拉框多选效果
2016/12/23 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
微信小程序 同步请求授权的详解
2017/08/04 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
基于python的七种经典排序算法(推荐)
2016/12/08 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
数据库专业英语
2012/11/30 面试题
可靠的数据流传输TCP
2016/03/15 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
大连星海广场导游词
2015/02/10 职场文书
老公婚前保证书
2015/02/28 职场文书
高中同学会致辞
2015/08/01 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL