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 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JS实现仿微博可关闭弹出层效果
Sep 21 Javascript
jQuery复合事件用法示例
Jun 10 jQuery
js获取地址栏参数的两种方法
Jun 27 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
JS实现简单的九宫格抽奖
Jun 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统计文章排行示例
2014/03/04 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JavaScript 事件系统
2010/07/22 Javascript
JavaScript类和继承 this属性使用说明
2010/09/03 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python实现学校管理系统
2018/01/11 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
蔻驰英国官网:COACH英国
2020/07/19 全球购物
应聘教师推荐信
2013/10/31 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
2015小学师德工作总结
2015/07/21 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
周末问候语大全
2015/11/10 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
volatile保证可见性及重排序方法
2022/08/05 Java/Android