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 相关文章推荐
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
详解vuex的简单使用
Mar 12 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
vue-cli3+typescript初体验小结
Feb 28 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 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判断网页是否gzip压缩
2013/06/25 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
js验证输入是否为手机号码或电话号码示例
2013/12/30 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
用 Python 制作地球仪的方法
2020/04/24 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python tkinter实现日期选择器
2021/02/22 Python
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
J2EE面试题集锦(附答案)
2013/08/16 面试题
经理职责范文
2013/11/08 职场文书
论文指导教师评语
2014/04/28 职场文书
大学生毕业评语
2014/12/31 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
python如何读取.mtx文件
2021/04/22 Python