target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(注册该事件的对象)(一般为父级)。this指向永远和currentTarget指向一致(只考虑this的普通函数调用)。

 <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>

解析:

当点击inner对象的时候,先触发inner绑定的事件,再触发outer绑定的事件,(因为outer是在事件冒泡阶段绑定的,如果outer是在捕获阶段绑定的,就会先触发out的事件程序,即便inner事件也绑定在捕获阶段。因为捕获流从根部元素开始)。

事件流:捕获(自顶而下)——目标阶段——冒泡(自下而顶)

在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值。

target,currentTarget和this三者的区别的更多相关文章

  1. jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别

    jQuery中,$.extend,$obj.extend和$.fn.extend三者的区别 现在做的一个项目,所使用的框架是基于jQuery扩展的,于是平时学了一下jQuery,了解到了它的扩展函数: ...

  2. string、Empty和null三者的区别

    string.Empty和null三者的区别 本文转自  http://www.bitscn.com/pdb/dotnet/201003/181883.html 时间:2010-03-01 00:00 ...

  3. android Activity类中的finish()、onDestory()和System.exit(0) 三者的区别

    android Activity类中的finish().onDestory()和System.exit(0) 三者的区别 Activity.finish() Call this when your a ...

  4. 菜鸟,大牛和教主三者的区别(转自hzwer)

    菜鸟,大牛和教主,三者的区别 对菜鸟来说题目有三种:会算法且能AC的,会算法但不能AC的,不会做的 对大牛来说题目有两种:会做的,不会做的 对教主来说题目有两种:能AC的,数据有错的 菜鸟提交WA了, ...

  5. UIColor,CGColor,CIColor三者的区别和联系

    UIColor,CGColor,CIColor三者的区别和联系((转)) 最近看了看CoreGraphics的东西,看到关于CGColor的东西,于是就想着顺便看看UIColor,CIColor,弄清 ...

  6. /storage/sdcard, /sdcard, /mnt/sdcard 三者的区别

    原文地址: /storage/sdcard, /sdcard, /mnt/sdcard 三者的区别 - petercao - 博客园 http://www.cnblogs.com/bluestorm/ ...

  7. String,StringBuilder,StringBuffer三者的区别

    参考   String,StringBuilder,StringBuffer三者的区别 这三个类之间的区别主要是在两个方面,即运行速度和线程安全这两方面. 1.运行速度 首先说运行速度,或者说是执行速 ...

  8. this指向和apply,call,bind三者的区别

    一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...

  9. ava、Python和PHP三者的区别

    Java.Python和PHP三者的区别 2017年07月15日 22:09:21 书生_AABB 阅读数:18994   版权声明:本文为博主原创文章,未经博主允许不得转载. https://blo ...

随机推荐

  1. LINQ 客户端生成自增列

    var testQuery = (from item in TestInfo.GroupBy(t=>t.TestName) select new { TestCode = item.Min(g= ...

  2. 基站查询接口,基站查询API

    查询接口为商用,用于软件开发,非开发用户用不上.(说明:接口不能进行手机定位) 如需申请key,请联系QQ 2258172309. 1.移动联通基站查询接口 请求示例:http://www.cellm ...

  3. AI(二):人脸识别

    微软提供的人脸识别服务可检测图片中一个或者多个人脸,并为人脸标记出边框,同时还可获得基于机器学习技术做出的面部特征预测.可支持的人脸功能有:年龄.性别.头部姿态.微笑检测.胡须检测以及27个面部重要特 ...

  4. 计算一维组合数的java实现

    背景很简单,就是从给定的m个不同的元素中选出n个,输出所有的组合情况! 例如:从1到m的自然数中,选择n(n<=m)个数,有多少种选择的组合,将其输出! 本方案的代码实现逻辑是比较成熟的方案: ...

  5. kali 初始化

    关于kali使用前的一些配置,网上有很多版本,但是几乎都很雷同,或者是不全,或者是根本就没有测试过,或者是有的方法是错的(换句话说是版本变化的差异),因此让很多人接触kali时百度无数,效果一般,浪费 ...

  6. Building GCC 4.1.2 in CentOS 7 for Maya API development

    Following the official guid: http://help.autodesk.com/cloudhelp/2015/ENU/Maya-SDK/files/Setting_up_y ...

  7. 黄聪:路由器WIFI连接无法正常访问个别网站及发送图片

    打开路由,路由默认MTU是1500,改成1472 就解决了

  8. Kendo UI For ASP.NET MVC项目资源

    一.官网: 1.Telerik大学官网:http://best.telerikacademy.com/ 二.相关博客 1.http://blog.csdn.net/magicsgxie/article ...

  9. the import javax.servlet

    问题: 在eclipse中编写servlet时出现“the import javax.servlet unresolved” 问题原因: 缺少servlet-api.jar架包. 问题解决办法: 在e ...

  10. Erlang初学

    这篇文章主要介绍了Erlang初学:Erlang的一些特点和个人理解总结,本文总结了函数式编程.一切都是常量.轻量进程.进程端口映射及典型缺点等内容,需要的朋友可以参考下 我对 Erlang 编程理念 ...