JavaScript tips —— target与currentTarget的区别
定义
以下是红宝书的描述
| 属性/方法 | 类型 | 读/写 | 说明 |
| 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的区别的更多相关文章
- js中的target与currentTarget的区别<转>
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
- 事件冒泡和事件捕获以及解释target和currenttarget的区别
冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...
- 关于js中event的target和currentTarget的区别
今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...
- target和currentTarget的区别
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.只有当事件流处在目标阶段的时候,两个的指向才是一样的, 而当处于捕获和冒泡阶段的时候,target指向被单击的 ...
- 微信小程序的target和currentTarget的区别
https://www.jb51.net/article/160886.htm 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下 ...
- js中event的target和currentTarget的区别
js中的event对象包含很多有用的信息 target:触发事件的元素. currentTarget:事件绑定的元素. 两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: ...
- target与currentTarget的区别？
通俗易懂的说法: 比如说现在有A和B, A.addChild(B) A监听鼠标点击事件 那么当点击B时,target是B,currentTarget是A 也就是说,currentTarget始终是监听 ...
- target 和 currentTarget的区别
target是当前点击的组件,currentTarget是扑捉到事件的组件
- target与currentTarget与this的区别
target与currentTarget与this的区别: target在事件流的目标阶段:currentTarget在事件的捕获.目标及冒泡阶段. 只有当事件流处在目标阶段的时候,二者的指向才是一致 ...
随机推荐
- python拓展库whl下载网址集合：
http://www.lfd.uci.edu/~gohlke/pythonlibs/
- Fluent Ribbon 第六步 StartScreen
上一节,介绍了Toolbar的主要功能,说明了ToolBar的一些最基本用法,这一节,介绍Ribbon的一个重要功能startScreen, startScreen软件第一次启动,呈现的界面. 由于R ...
- table width 决定 td width
w td width 有无在chrome edge ff 均未影响td实际宽度,td接近等比分配table width. <!doctype html> <html lang=&qu ...
- netstat命令——网络，进程，内存
netstat网络.进程.内存 转自:https://www.cnblogs.com/xieshengsen/p/6618993.html https://zhidao.baidu.com/quest ...
- python逆向工程：通过代码生成类图
python逆向工程:通过代码生成类图 大致过程 现在有一个core包,里面有python的代码. 通过core包,生成python的类图,如下: 实施步骤: 1.首先安装graphviz,一个画图工 ...
- Android图片加载框架Picasso最全使用教程5
在之前的四篇博客中,我们学习了所有的关于Picasso的主要方法,我们也对这个Picasso有了一个很深的认识,下面就主要对Picasso自身进行分析,这样的话,会让我们更了解Picasso的核心方法 ...
- redis实现cache系统原理(五)
1. 介绍 cache就是人们所说的缓存.我们这里所说的cache是web上的.对用户来说,衡量一个网站是否具有良好的体验,其中一个标准就是响应速度的快慢.可能网站刚上线,功能还较少,数据库的记录也不 ...
- begoo——对象的CRUD操作
如果已知主键的值,那么可以使用这些方法进行CRUD操作 对object操作的四个方法Read/Insert/Update/Delete o := orm.NewOrm() user := new(Us ...
- 面向对象封装 classmethod和staticmethod方法
接口类 接口类:是规范子类的一个模板,只要接口类中定义的,就应该在子类中实现接口类不能被实例化,它只能被继承支持多继承接口隔离原则:使用多个专门的接口,而不使用单一的总接口.即客户端不应该依赖那些不需 ...
- CSS 中文字体 Unicode 编码表
CSS 中文字体 Unicode 编码表 在 CSS 中设置字体名称,直接写中文是可以的.但是在文件编码(GB2312.UTF-8 等)不匹配时会产生乱码的错误. 为此,在 CSS 直接使用 Unic ...