定义

以下是红宝书的描述

属性/方法 类型 读/写 说明
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. iOS之block,一点小心得

    作为一个iOS开发程序员,没用过block是不可能的.这次我探讨的是block原理,但是有些更深层次的东西,我也不是很清楚,以后随着更加了解block将会慢慢完善. 第一个问题,什么是block? 我 ...

  2. [荐][转]为何应该使用 MacOS X(论GUI环境下开发人员对软件的配置与重用)

    一周前我和 Tinyfool 闲聊苹果操作系统,都认为对于开发人员来说,苹果操作系统(MacOS)是上佳的选择.Tinyfool 笔头很快,当即就写了一篇长文章,我则笔头很慢,今天才全部码好.他的文章 ...

  3. Java 之多线程通信(等待/唤醒)

    多线程间通信: 多个线程在处理同一个资源, 但是任务却不同. 等待/唤醒机制 涉及的方法 wait(): 让线程处于冻结状态, 被 wait() 的线程会被存储到线程池中 notify(): 唤醒线程 ...

  4. 转!!Java设置session超时(失效)的时间

    Java设置session超时(失效)的时间   在一般系统登录后,都会设置一个当前session失效的时间,以确保在用户长时间不与服务器交互,自动退出登录,销毁session具体设置的方法有三种:1 ...

  5. django--admin模型层

    django amdin是django提供的一个后台管理页面,改管理页面提供完善的html和css,使得你在通过Model创建完数据库表之后,就可以对数据进行增删改查,而使用django admin ...

  6. 前端基础-css(1)

    一.css的引入方式 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面 ...

  7. 什么是EJB

    学习EJB可以加深对J2EE平台的认识. 百科定义EJB: 被称为java企业bean,服务器端组件,核心应用是部署分布式应用程序.用它部署的系统不限定平台.实际上ejb是一种产品,描述了应用组件要解 ...

  8. go——切片(二)

    切片是一种数据结构,这种数据结构便于使用和管理数据集合. 切片是围绕动态数组的概念构建的,可以按需自动增长和缩小. 切片的动态增长是通过内置函数append来实现的.这个函数可以快速且高效地增长切片. ...

  9. change the color of a disabled TEdit?

    change the color of a disabled TEdit? Author: P. Below Category: VCL {Question:How can I change the  ...

  10. Bytes to be written to the stream exceed the Content-Length bytes size specified 解决方法

    context.Response.ContentType = encode;                using (StreamWriter writer = new StreamWriter( ...