【前端】event.target 和 event.currentTarget 的区别
event.target 和 event.currentTarget 的区别
举例说明：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
div {
margin: 1rem;
padding: 1rem;
}
#a {background-color: #f00;}
#b {background-color: #0f0;}
#c {background-color: #00f;}
#d {background-color: #aaa;}
</style>
</head>
<body>
<div id="a">a
<div id="b">b
<div id="c">c
<div id="d">d</div>
</div>
</div>
</div>
<script>
function logTarget(e) {
console.log('target:' + e.target.id + ' & currentTarget:' + e.currentTarget.id);
}
document.getElementById('a').addEventListener('click', logTarget, false);
document.getElementById('b').addEventListener('click', logTarget, false);
document.getElementById('c').addEventListener('click', logTarget, false);
document.getElementById('d').addEventListener('click', logTarget, false);
</script>
</body>
</html>
当点击d的时候，输出：
target:d & currentTarget:d
target:d & currentTarget:c
target:d & currentTarget:b
target:d & currentTarget:a
当点击b的时候，输出：
target:b & currentTarget:b
target:b & currentTarget:a
结论
- target始终鼠标点击的element，固定不变；
- currentTarget在事件捕获或者事件冒泡过程中，指向当前的element，会不断变化。
【前端】event.target 和 event.currentTarget 的区别的更多相关文章
- event.target 和 event.currentTarget 的区别
event.target This property of event objects is the object the event was dispatched on. It is differe ...
- e.target与e.currentTarget的区别，事件冒泡与事件捕获 ，事件委托
e.target与e.currentTarget的区别:https://www.jianshu.com/p/1dd668ccc97a 事件冒泡与事件捕获 :https://www.jianshu.co ...
- event.target和event.currentTarget区别
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
- Event.target和Event.currentTarget的区别
<style> * { margin:0; padding:0; list-style:none; } #ul { width:400px; height:250px; margin:0 ...
- event.target和event.currentTarget的区别----0605加深理解
target:触发事件的元素.currentTarget:事件绑定的元素.两者在没有冒泡的情况下,是一样的值,但在用了事件委托的情况下,就不一样了,例如: <ul id="ulT&qu ...
- JavaScript Event Delegation, and event.target vs. event.currentTarget
原文:https://medium.com/@florenceliang/javascript-event-delegation-and-event-target-vs-event-currentta ...
- js中event.target和event.srcElement的区别
看了很多资料绝对结果就是 firefox 下的 event.target = IE 下的 event.srcElement jquery中的event.target属性的作用是获取到出发事件的元素.j ...
- e.target与e.currentTarget的区别
在DOM事件对象中有两个属性总是时不时的困扰我,就是target和currentTarget,有时候很迷惑分不清两者的区别,因此有必要把这两个属性好好梳理一下,加深理解,以便日后的查询. MDN中对t ...
- 捕获当前事件作用的对象event.target和event.srcElement
语法: //返回事件的目标节点(触发该事件的节点). event.target //FF,Chrome event.srcElement //IE 栗子: var oDiv=document.getE ...
随机推荐
- C#实现对远程服务器的内存和CPU监控
C#实现对远程服务器的内存和CPU监控小记 1. 主要使用到的组件有System.Management.dll 2. 主要类为 :ManagementScope 连接远程服务器示例代码: priv ...
- kafka集群搭建和使用Java写kafka生产者消费者
1 kafka集群搭建 1.zookeeper集群 搭建在110, 111,112 2.kafka使用3个节点110, 111,112 修改配置文件config/server.properties ...
- Android 自定义View （五）——实践
前言: 前面已经介绍了<Android 自定义 view(四)-- onMeasure 方法理解>,那么这次我们就来小实践下吧 任务: 公司现有两个任务需要我完成 (1)监测液化天然气液压 ...
- 使用git 更新线上代码
先本地代码合并://1合并分支git branch//2查看taggit tag //3添加tagcloud_crm]$ git tag -a v1.0.2 -m "0902"// ...
- 。。。IO流的学习之一。。。
文件写入流FileWriter的使用: import static org.junit.Assert.*; import java.io.File; import java.io.FileWriter ...
- eclipse中Maven创建WEB项目
刚刚学到Maven的时候总是容易忽视到一些创建Maven项目是的步骤, 这里记录笔者熟悉一种,直接创建Maven Project 下面开始吧--- 选择web-app,没得说,然后那些groupID ...
- Android系统调用
android 中intent是经常要用到的.不管是页面牵转,还是传递数据,或是调用外部程序,系统功能都要用到intent. 在做了一些intent的例子之后,整理了一下intent,希望对大家有用. ...
- 论文阅读（Xiang Bai——【TIP2014】A Unified Framework for Multi-Oriented Text Detection and Recognition）
Xiang Bai--[TIP2014]A Unified Framework for Multi-Oriented Text Detection and Recognition 目录 作者和相关链接 ...
- 夺命雷公狗-----React---16--事件操作事件
<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...
- 商品条形码（JBarcode）
之前没有使用过这个,现在使用JBarcode生成商品条形码,工作之前的准备工作: Eclipse:Eclipse Java EE IDE for Web Developers.Version: Hel ...