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 Firefox 使用自定义标签的区别
Oct 15 Javascript
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 Javascript
基于Vue实现图书管理功能
Oct 17 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
JavaScript 空间坐标的使用
Aug 19 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 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生成html文件方法总结
2014/12/01 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
Yii2 GridView实现列表页直接修改数据的方法
2016/05/16 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
实例讲解JS中pop使用方法
2019/01/27 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
vue实现分页加载效果
2019/12/24 Javascript
Python 功能和特点(新手必学)
2015/12/30 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Django3中的自定义用户模型实例详解
2020/08/23 Python
Django静态文件加载失败解决方案
2020/08/26 Python
应届毕业生的自我鉴定
2013/11/13 职场文书
美术专业个人自我评价
2014/01/18 职场文书
网络信息安全承诺书
2014/03/26 职场文书
委托书范本
2014/04/02 职场文书
房屋认购协议书
2015/01/29 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
消防安全主题班会
2015/08/12 职场文书
Python实现天气查询软件
2021/06/07 Python