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实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
JavaScript学习教程之cookie与webstorage
Jun 23 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
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
星际争霸 Starcraft 发展史
2020/03/14 星际争霸
虹吸壶是谁发明的?煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
3个PHP多维数组转为一维数组的方法实例
2014/03/13 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
Javascript的IE和Firefox兼容性汇编(zz)
2007/02/02 Javascript
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
基于jQuery实现照片墙自动播放特效
2017/01/12 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
2018/07/05 jQuery
js实现简单选项卡功能
2020/03/23 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
简单介绍Python中的len()函数的使用
2015/04/07 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
python中print()函数的“,”与java中System.out.print()函数中的“+”功能详解
2017/11/24 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
python重要函数eval多种用法解析
2020/01/14 Python
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
C#面试问题
2016/07/29 面试题
酒店员工检讨书
2014/02/18 职场文书
个人借款担保书
2014/04/02 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
余世维讲座观后感
2015/06/11 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS