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在事件的捕获.目标及冒泡阶段. 只有当事件流处在目标阶段的时候,二者的指向才是一致 ...
随机推荐
- CodeForces 17E Palisection(回文树)
E. Palisection time limit per test 2 seconds memory limit per test 128 megabytes input standard inpu ...
- 网络编程4 网络编程之FTP上传简单示例&socketserver介绍&验证合法性连接
今日大纲: 1.FTP上传简单示例(详细代码) 2.socketserver简单示例&源码介绍 3.验证合法性连接//[秘钥加密(urandom,sendall)(注意:中文的!不能用)] 内 ...
- JavaScript 学习(2)表单元素
##JavaScript 学习-2 1. 表单和表单元素 1.1 form对象 form对象的引用:document.forms[0]或者引用name属性,如:document.forms[" ...
- 001-ant design pro安装、目录结构、项目加载启动【原始、以及idea开发】
一.概述 1.1.脚手架概念 编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具.例如大多数的React项目都有src,public,webpack配置文件等等, ...
- Java-idea-生成JavaDoc
1.选中要生成的doc模块 2.选择Tools→Generate JavaDoc 3.填写一下信息 1. 选择是整个项目还是模块还是单个文件 2. 文档输出路径 4. 传入JavaDoc的参数,一般这 ...
- 使用.gitignore忽略文件
单个项目配置 在.git文件夹同目录下打开git bash,执行命令: touch .gitignore 生成“.gitignore”文件. 在”.gitignore” 文件里输入你要忽略的文件夹及其 ...
- C# 调用win api获取chrome浏览器中地址
//FindWindow 查找窗口 //FindWindowEx查找子窗口 //EnumWindows列举屏幕上的所有顶层窗口,如果回调函数成功则返回非零,失败则返回零 //GetWindowText ...
- Window mysql 安装配置
1.下载 安装包 mysql-noinstall--winx64.zip 2.解压缩zip包 安装路径 C:\Program Files\MySQL\mysql--winx64 3.配置环境变量 添加 ...
- PAT 1095 Cars on Campus
1095 Cars on Campus (30 分) Zhejiang University has 8 campuses and a lot of gates. From each gate we ...
- windows如何安装mysql
参考一下网址,已测试可用 https://www.cnblogs.com/reyinever/p/8551977.html