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. iScroll知识点

    1.如果你有一个复杂的DOM结构,最好在onload事件之后适当的延迟,再去初始化iScroll.最好给浏览器100或者200毫秒的间隙再去初始化iScroll. 2.iScroll作用于滚动区域的外 ...

  2. git常见命令

    总结自己的Git常用命令 使用git也有一段时间了,把自己常用的命令用自己的描述记录起来,方便自己备忘也方便其他人参考. 目录: 最基本的命令: git clone 拷贝并跟踪远程的master分支. ...

  3. 获取小众ftp服务器指定目录内容列表

    今天获取小众ftp服务器指定目录内容列表时费劲急了. ///parama url="ftp://x.x.x.x/dir_name" public string GetFTPDir( ...

  4. 【学】AngularJS日记(2)

    数组循环放到新生成的li中 <ul ng-init="arr=[12,5,6,394,344]"> <li ng-repeat="item in arr ...

  5. ios启动载入启动图片

    版本判断: 1.首先你要知道这个键值对的key:id key =   (id)kCFBundleVersionKey; 2.同过本地的NSBundle取得当前的版本号. 3.在沙盒中取得对应的版本号. ...

  6. TensorFlow中max pooling层各参数的意义

    官方教程中没有解释pooling层各参数的意义,找了很久终于找到,在tensorflow/python/ops/gen_nn_ops.py中有写: def _max_pool(input, ksize ...

  7. 针对WebService服务,客户端调用时报序列化的最大项数maxItemsInObjectGraph超过65536问题

    今天在使用webservice服务时候,报异常"The InnerException message was 'Maximum number of items that can be ser ...

  8. LAMP_01_Win下安装配置MySql

    1.解压Mysql server到D盘配置环境变量MYSQL_HOME      D:\J2EE\apache-ant-1.9.7PATH            %MYSQL_HOME%\bin; 2 ...

  9. [SQL]查询数据库里都有哪些自己建的表

    方法一:SELECT * FROM FTCE_ACCS.INFORMATION_SCHEMA.TABLES Where TABLE_TYPE='BASE TABLE'----------------- ...

  10. 通过seekBar改变图片的透明度

    作者:堕落的天使 对应的图片 activity_main.xml(代码) <RelativeLayout xmlns:android="http://schemas.android.c ...