定义

以下是红宝书的描述

属性/方法 类型 读/写 说明
currentTarget Element 只读 其事件处理程序当前正在处理事件的那个元素
target Element 只读 事件的目标

MDN:

currentTarget： 当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

target：一个触发事件的对象的引用。

结论

emmmm，这说的真晦涩，不自己动手还真看不出有啥差别，先给结论吧：currentTarget指的是事件触发后，冒泡到绑定处理程序的元素，就是绑定事件处理程序的元素，target指的是触发事件的元素。

demo

html:

 <!DOCTYPE html>

 <html lang="en">

   <head>

     <meta charset="UTF-8">

     <title>currentTarget&target</title>

   </head>

   <body>

     <div id="div1">

       <div id="div2">

         <div id="div3">

           click me ~

         </div>

       </div>

     </div>

   </body>

 </html>

JavaScript:

 let div1 = document.getElementById('div1'),

     div2 = document.getElementById('div2'),

     div3 = document.getElementById('div3');

 div1.addEventListener('click', (ev) => {

   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);

 });

 div2.addEventListener('click', (ev) => {

   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);

 });

 div3.addEventListener('click', (ev) => {

   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);

 });

当单击div3时，事件依次冒泡。但是触发时间的元素为div3，所以target为div3，而从捕获阶段，到冒泡阶段途径了元素div3，div2，div1，绑定事件处理元素的依次为div3，div2，div1，所以currentTarget为div3，div2，div1。

浏览器兼容性

target

在 IE6-8 中，事件模型与标准不同。使用非标准的 element.attachEvent() 方法绑定事件监听器。在该模型中，事件对象有一个 srcElement 属性，等价于target 属性。

target = ev.target || ev.srcElement;

currentTarget

IE6-8中，事件模型与标准不一样，使用非标准的 element.attachEvent() 来绑定事件监听器。该模型中，没有等价于 event.currentTarget 的接口，且 this 指向全局对象。

一种模拟 event.currentTarget 功能的方法是：将监听器包在一个函数中，然后使用 Function.prototype.call 调用这个包装函数，并将元素对象作为第一个参数。这样，this就是想要的值了。

JavaScript tips —— target与currentTarget的区别的更多相关文章

  1. js中的target与currentTarget的区别<转>

    关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...

  2. 事件冒泡和事件捕获以及解释target和currenttarget的区别

    冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...

  3. 关于js中event的target和currentTarget的区别

    今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...

  4. target和currentTarget的区别

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...

  5. 微信小程序的target和currentTarget的区别

    https://www.jb51.net/article/160886.htm 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下 ...

  6. js中event的target和currentTarget的区别

    js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...

  7. target与currentTarget的区别？

    通俗易懂的说法: 比如说现在有A和B, A.addChild(B) A监听鼠标点击事件 那么当点击B时,target是B,currentTarget是A 也就是说,currentTarget始终是监听 ...

  8. target 和 currentTarget的区别

    target是当前点击的组件,currentTarget是扑捉到事件的组件

  9. target与currentTarget与this的区别

    target与currentTarget与this的区别: target在事件流的目标阶段:currentTarget在事件的捕获.目标及冒泡阶段. 只有当事件流处在目标阶段的时候,二者的指向才是一致 ...

随机推荐

  1. python框架Scrapy报错TypeError: 'float' object is not iterable解决

    原因是:Twisted版本高了. 解决办法: 只要把Twisted库降级到16.6.0即可: pip3 install Twisted== 注:Twisted16..0安装后,会自动卸载高版本的Twi ...

  2. Python设置默认编码为UTF-8

    1.在Python\Lib\site-packages目录下创建一个sitecustomize.py文件 源代码: import sys sys.setdefaultencoding('utf-8') ...

  3. https://help.aliyun.com/knowledge_detail/49787.html?spm=a2c4g.11186631.2.3.6f856f39tiE98P

    https://help.aliyun.com/knowledge_detail/49787.html?spm=a2c4g.11186631.2.3.6f856f39tiE98P

  4. Python高级教程-切片

    Python中的切片 取一个list或tuple的部分元素是非常常见的操作.比如,一个list如下: >>> L = ['A','B','C','D'] 对经常取指定索引范围的操作, ...

  5. mongo 一次插入多条

    db.getCollection('organization').insert( [ {"organizationTitle" : "台州广播电台1", &qu ...

  6. Tornado模块分类

    Tornado模块分类 1. Core web framework tornado.web — 包含web框架的大部分主要功能,包含RequestHandler和Application两个重要的类 t ...

  7. Linux基础整理 + 注释

    1.Linux的常用命令: ls 显示当前文件夹目录 ll -->详细信息 ls -a 显示所有文件 ls -lhSr w 查看登录的帐号,还可以查看cpu负载情况,who am i ,who ...

  8. 简明python教程三-----函数

    函数通过def关键字定义.def关键字后跟一个函数的表标识符名称,然后跟一对圆括号. 圆括号之中可以包括一些变量名,该行以冒号结尾.接下来是一块语句,它们是函数体. def sayHello(): p ...

  9. ufs emmc

    UFS 2.0闪存标准使用的是串行界面,很像PATA.SATA的转换.并且它支持全双工运行,可同时读写操作,还支持指令队列. eMMC是半双工,读写必须分开执行,指令也是打包的. 而且UFS芯片不仅传 ...

  10. Pimpl Idiom /handle body idiom

    在读<Effective C++>和项目源代码时,看到pImpl Idiom.它可以用来降低文件间的编译依赖关系,通过把一个Class分成两个Class,一个只提供接口,另一个负责实现该接 ...