JS target与currentTarget区别说明


Posted in Javascript onAugust 28, 2011
<div id="outer" style="background:#099"> 
click outer 
<p id="inner" style="background:#9C0">click inner</p> 
<br> 
</div> <script type="text/javascript"> 
function G(id){ 
return document.getElementById(id); 
} 
function addEvent(obj, ev, handler){ 
if(window.attachEvent){ 
obj.attachEvent("on" + ev, handler); 
}else if(window.addEventListener){ 
obj.addEventListener(ev, handler, false); 
} 
} 
function test(e){ 
alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName); 
} 
var outer = G("outer"); 
var inner = G("inner"); 
//addEvent(inner, "click", test); 
addEvent(outer, "click", test); 
</script>

上面的示例中,当在outer上点击时,e.target与e.currentTarget是一样的,都是div;当在inner上点击时,e.target是p,而e.currentTarget则是div。
Javascript 相关文章推荐
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
Aug 28 #Javascript
range 标准化之获取
Aug 28 #Javascript
dojo学习第一天 Tab选项卡 实现
Aug 28 #Javascript
js中设置元素class的三种方法小结
Aug 28 #Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 #Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 #Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 #Javascript
You might like
php 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
js获取当前月的第一天和最后一天的小例子
2013/11/18 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
2017/03/10 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
vue之数据交互实例代码
2017/06/20 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
2018/03/26 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
jQuery实现可编辑的表格
2019/12/11 jQuery
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
介绍一下RMI的基本概念
2016/12/17 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
微博营销计划书
2014/01/10 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
《海底世界》教学反思
2014/04/16 职场文书
设备收款委托书范本
2014/10/02 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android