事件获取目标 currentTarget target srcElement 三者之间的区别和联系
currentTarget 指的是触发事件的当前对象，可以是冒泡和捕获的对象，不一定是点击或者鼠标移入等事件的直接触发对象。可以是他的父元素等。
target 指的是事件触发的直接对象。IE有兼容问题。
srcElement 和target相同，firFox不兼容。
获取直接目标对象的兼容写法 var target = e.target || e.srcElement
target 触发事件的源组件。
currentTarget 事件绑定的当前组件。
如果你在父容器上绑定了事件并传参，当你点击父容器时，事件绑定的组件和触发事件的源组件是同一个元素，所以currentTarget 、target 都可以拿到参数，但是当你点击子元素时，target 就不是事件绑定的组件了，所以拿不到参数。
由于事件冒泡的机制，父容器上绑定的事件依然可以触发，所以currentTarget 依然可以拿到参数。
=================================================================================================
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 三者之间的区别和联系的更多相关文章
- 事件获取目标 currentTarget target srcElement三者之间的区别和联系
currentTarget 指的是触发事件的当前对象,可以是冒泡和捕获的对象,不一定是点击或者鼠标移入等事件的直接触发对象.可以是他的父元素等. target 指的是事件触发的直接对象.IE有兼容 ...
- keydown,keypress,keyup三者之间的区别
最近看了Javascript高级教程中对过滤输入的介绍,想实现比如电话号码中不能包好非数值的字符,而相应文本中插入字符的操作是keypress事件,所以就想通过阻止这个事件的默认事件行为来阻止这个事件 ...
- iOS中NSNotification、delegate、KVO三者之间的区别与联系？
前面分别讲了delegate.notification和KVO的实现原理,以及实际使用步骤,我们心中不禁有个疑问,他们的功能比较类似,那么在实际的编程中,如何选择这些方式呢? 在网上看到一个博客上详细 ...
- [转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别
要学习及应用好Ext框架,必须需要理解Html DOM.Ext Element及Component三者之间的区别. 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM ...
- $POST 、$HTTP_RAW_POST_DATA、php://input三者之间的区别
$POST .$HTTP_RAW_POST_DATA.php://input三者之间的区别 访问原始 POST 数据的更好方法是 php://input或者$HTTP_RAW_POST_DATA.$H ...
- @private、@protected与@public三者之间的区别
@private.@protected与@public三者之间的区别 类之间关系图 @private只能够使用在声明的类当中,其子类也不能够使用用@private声明的实例变量 @protected只 ...
- .NET、C#和ASP.NET三者之间的区别与联系
.NET.C#和ASP.NET三者之间的区别与联系 1..net(dot net) .net是一个平台,抽象的平台概念. 实现形式是库:①定义了基本的类型(通用类型系统CTS,common type ...
- C#、.NET和ASP.NET三者之间的区别
刚毕业后出去找工作面试的时候就遇到这个问题!.回答不上来.回来网上查的如下: 那么 .NET.C#和ASP.NET这三者之间区别不清楚,到底它们之间有什么联系呢? 1..NET是一个平台,一个抽象的平 ...
- socket，tcp，http三者之间的区别和原理
http.TCP/IP协议与socket之间的区别下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: 7 应用层 例如HTTP.SMTP.SNMP.FTP.Telnet.SIP ...
随机推荐
- 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查
品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人 ...
- 16.数据类型（data_type）
CREATE TABLE 语句 CREATE TABLE 语句用于创建数据库中的表. SQL CREATE TABLE 语法 CREATE TABLE 表名称 ( 列名称1 数据类型, 列名称2 数据 ...
- Django框架 之 querySet详解
Django框架 之 querySet详解 浏览目录 可切片 可迭代 惰性查询 缓存机制 exists()与iterator()方法 QuerySet 可切片 使用Python 的切片语法来限制查询集 ...
- VS code docker 调试 asp.net core
前言 .net core的诞生就是为了解决跨平台的事情的,所以.net core app运行在linux.macOS.docker上也不是什么新鲜事了. 相信已经有不少.net core的项目已经部署 ...
- Win7怎么进入安全模式 三种轻松进入Win7安全模式方法
发布时间:2013-05-27 11:23 作者:电脑百事网原创 来源:www.pc841.com 13783次阅读 win7的安全模式和XP如出一辙,在安全模式里我们可以删除顽固文件.查杀病毒.解除 ...
- Java 起名规范
注重代码编写规范: 1)都得遵循标识号的规范 2)不能以关键字,数字开头.也不要以拼音起名,最好用英文单词,单词组合来起名. 3)采用驼峰表示法,使用英文单词组合,单词首字母要大些,起到分割作用. - ...
- 数据库（学习整理）----7--Oracle导入导出数据库文件
Oracle导入本地数据库操作手册 1.旧数据库忘记了密码,首先进入cmd:1)输入:sqlplus/nolog2)输入:connect/as sysdba3)输入:alter user sys id ...
- Laravel框架中的数据库CURD操作、连贯操作、链式操作的用法
Laravel是一套简洁.优雅的PHP Web开发框架(PHP Web Framework).它可以让你从面条一样杂乱的代码中解脱出来:它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁.富于 ...
- 开源IMS平台中间件Mobicents
下面内容来自百度百科 Mobicents 是一个高伸缩性.事件驱动的应用服务器.是一款专业的.开放源代码的 VoIP 中间件平台.Mobicents是首个采用JAIN SLEE标准的开放式源代码电信应 ...
- 状态压缩DP----HDU2809
状态压缩DP的一道较不错的入门题,第二次做这类问题,感觉不是很顺手,故记录下来. 题目的意思就是吕布战群雄,先给你6个数,分别是吕布的攻击值,防御值,生命值,升级后此三值各自的增量,然后是对手的个数n ...