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 相关文章推荐
window resize和scroll事件的基本优化思路
Apr 29 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 Javascript
js实现弹窗猜数字游戏
Nov 26 Javascript
jquery实现穿梭框功能
Jan 19 jQuery
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利用COM对象访问SQLServer、Access
2006/10/09 PHP
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
php 静态变量的初始化
2009/11/15 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php通过获取头信息判断图片类型的方法
2015/06/26 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
JS获取后台Cookies值的小例子
2013/03/04 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
vue表单自定义校验规则介绍
2018/08/28 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python快速排序代码实例
2013/11/21 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
AmazeUI 列表的实现示例
2020/08/17 HTML / CSS
保安的辞职报告怎么写
2014/01/20 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
晚会主持词开场白
2014/03/17 职场文书
奉献演讲稿范文
2014/05/21 职场文书
大学军训决心书
2015/02/05 职场文书
素质教育培训心得体会
2016/01/19 职场文书
2017元旦晚会开幕词
2016/03/03 职场文书