currentTarget   指的是触发事件的当前对象，可以是冒泡和捕获的对象，不一定是点击或者鼠标移入等事件的直接触发对象。可以是他的父元素等。

target 指的是事件触发的直接对象。IE有兼容问题。

srcElement 和target相同，firFox不兼容。

获取直接目标对象的兼容写法 var target = e.target || e.srcElement

target 触发事件的源组件。 
currentTarget 事件绑定的当前组件。

如果你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，所以currentTarget 、target 都可以拿到参数，但是当你点击子元素时，target 就不是事件绑定的组件了，所以拿不到参数。 
由于事件冒泡的机制，父容器上绑定的事件依然可以触发，所以currentTarget 依然可以拿到参数。

=================================================================================================

MDN中对target的解释为，一个触发事件的对象的引用， 当事件处理程序在事件的冒泡或捕获阶段被调用时。
而对于currentTarget，它指的是当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

举个例子来说明。

事件冒泡阶段

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

</head>

<body>

  <ul>

    <li>hello 1</li>

    <li>hello 2</li>

    <li>hello 3</li>

    <li>hello 4</li>

  </ul>

  <script>

    let ul = document.querySelectorAll('ul')[0]

    let aLi = document.querySelectorAll('li')

    ul.addEventListener('click',function(e){

       let oLi1 = e.target

       let oLi2 = e.currentTarget

        console.log(oLi1)   //  被点击的li

        console.log(oLi2)   // ul

        console.og(oLi1===oLi2)  // false

    })

  </script>

</body>

</html>
 
我们知道，e.target可以用来实现事件委托，该原理是通过事件冒泡（或者事件捕获）给父元素添加事件监听，e.target  指向引发触发事件的元素，如上述的例子中，e.target 指向用户点击的   li，由于事件冒泡，li的点击事件冒泡到了 ul 上，通过给  ul 添加监听事件而达到了给每一个li添加监听事件的效果，而 e.currentTarget 指向的是给绑定事件监听的那个对象，即 ul，从这里可以发现，e.currentTarget===this 返回 true，而 e.target===this 返回false。e.currenttarget 和 e.target是不相等的。

总结：

  • e.target 指向触发事件监听的对象。
  • e.currentTarget 指向添加监听事件的对象。

事件获取目标 currentTarget target srcElement 三者之间的区别和联系的更多相关文章

  1. 事件获取目标 currentTarget target srcElement三者之间的区别和联系

    currentTarget   指的是触发事件的当前对象,可以是冒泡和捕获的对象,不一定是点击或者鼠标移入等事件的直接触发对象.可以是他的父元素等. target 指的是事件触发的直接对象.IE有兼容 ...

  2. keydown,keypress,keyup三者之间的区别

    最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...

  3. iOS中NSNotification、delegate、KVO三者之间的区别与联系？

    前面分别讲了delegate.notification和KVO的实现原理,以及实际使用步骤,我们心中不禁有个疑问,他们的功能比较类似,那么在实际的编程中,如何选择这些方式呢? 在网上看到一个博客上详细 ...

  4. [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

    要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...

  5. $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别

    $POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...

  6. @private、@protected与@public三者之间的区别

    @private.@protected与@public三者之间的区别 类之间关系图 @private只能够使用在声明的类当中,其子类也不能够使用用@private声明的实例变量 @protected只 ...

  7. .NET、C#和ASP.NET三者之间的区别与联系

    .NET.C#和ASP.NET三者之间的区别与联系 1..net(dot net) .net是一个平台,抽象的平台概念. 实现形式是库:①定义了基本的类型(通用类型系统CTS,common type ...

  8. C#、.NET和ASP.NET三者之间的区别

    刚毕业后出去找工作面试的时候就遇到这个问题!.回答不上来.回来网上查的如下: 那么 .NET.C#和ASP.NET这三者之间区别不清楚,到底它们之间有什么联系呢? 1..NET是一个平台,一个抽象的平 ...

  9. socket，tcp，http三者之间的区别和原理

    http.TCP/IP协议与socket之间的区别下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: 7 应用层 例如HTTP.SMTP.SNMP.FTP.Telnet.SIP ...

随机推荐

  1. xamarin.droid自己的示例工程有些都装不上模拟器，是因为它的architectures选项没设对

    也许是版本更迭导致的,有些老工程的architectures不对,如果x86不勾的话,是不能在genymotion的模拟器上跑的.

  2. 使用 tpl 标签和 for 读取对象属性值中的数组

    来源于<sencha touch 权威指南> ----------------------------- 只摘抄app.js代码: Ext.require(['Ext.form.Panel ...

  3. Django框架 之 modelform组件

    Django框架 之 modelform组件 浏览目录 创建mldelform 添加记录 编辑记录 Django框架中的modelform组件 通过名字我们可以看出来,这个组件的功能就是把model和 ...

  4. Oracle——SQL基础

    一.SQL语句分为以下三种类型: DML: Data Manipulation Language 数据操纵语言DDL: Data Definition Language 数据定义语言DCL: Data ...

  5. css总结15：CSS3 圆角

    1 css圆角: 1.1 浏览器支持:-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本. 1.2 属性 border-radius: 代码如下: #rcorners1 { bor ...

  6. css总结3：Flex 布局教程：Flex-demos（转）

    上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我只列出代码,详细的语法解释请查阅<Flex布局教程:语法篇&g ...

  7. [转]FreeMarker使用

    copy自http://demojava.iteye.com/blog/800204 以下内容全部是网上收集: FreeMarker的模板文件并不比HTML页面复杂多少,FreeMarker模板文件主 ...

  8. ajax 判断账户密码 调取数据模糊查询 时钟

    一.判断账户密码 <Login.html> <head> <meta http-equiv="Content-Type" content=" ...

  9. 七月小说网 Python + GraphQL （三）

    概述 后台数据库几个基本表基本搭建完毕,看了下Github Develop的V4 Api抛弃了RESTful,采用GraphQL,感觉很有意思,一看文档,竟然有Python的开源实现 Graphene ...

  10. SQL server T-sql语句查询执行顺序

    前言 数据库的查询执行,毋庸置疑是程序员必备的技能之一,然而数据库查询执行的过程绚烂多彩,却是很少被人了解,今天我们来深入了解下sql查询的来龙去脉,为查询的性能优化打个基础 这篇博客,摒弃查询优化性 ...