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 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
Node.js+Express配置入门教程
May 19 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
JS中type=&quot;button&quot;和type=&quot;submit&quot;的区别
Jul 04 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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 中文字符串首字母的获取函数分享
2013/11/04 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
js中判断用户输入的值是否为空的简单实例
2013/12/23 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
jQuery简易时光轴实现方法示例
2017/03/13 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
Angular父组件调用子组件的方法
2018/04/02 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
python中有函数重载吗
2020/05/28 Python
python实现简单文件读写函数
2021/02/25 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
编程用JAVA解析XML的方式
2013/07/07 面试题
英文版餐饮业求职信
2013/10/18 职场文书
护士自荐信范文
2013/12/15 职场文书
项目管理计划书
2014/01/09 职场文书
护士辞职信模板
2014/01/20 职场文书
旅游业大学生创业计划书
2014/01/31 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书