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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
jquery与js实现全选功能的区别
Jun 11 jQuery
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
JavaScript的Set数据结构详解
Feb 18 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初学者头痛的十四个问题
2006/07/12 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
Vue.js第三天学习笔记(计算属性computed)
2016/12/01 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
Python 序列的方法总结
2016/10/18 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
python 实现逻辑回归
2020/12/30 Python
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
新电JAVA笔试题目
2014/08/31 面试题
大学生党员自我批评
2014/02/14 职场文书
奥利奥广告词
2014/03/20 职场文书
小学六年级学生评语
2014/04/22 职场文书
党员学习群众路线心得体会
2014/11/04 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书