【前端】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 ...
随机推荐
- 总结：客户端与服务器端使用正则增加URL参数的方法
先说服务器端的: C#版本 #region URL参数操作 /// <summary> /// URL参数操作 /// </summary> public class UrlP ...
- 面向过程 vs 面向对象
从网上摘录了一些面向过程vs.面向对象的分析,先简单记录如下,稍后会继续整理. 为什么会出现面向对象分析方法? 因为现实世界太复杂多变,面向过程的分析方法无法实现. 面向过程 采用面向过程必须了解整个 ...
- SQL性能优化
引言: 以前在面试的过程中,总有面试官问道:你做过sql性能优化吗?对此,我的答复是没有.一次没有不是自己的错误,两次也不是,但如果是多次呢?今天痛下决心,把有关sql性能优化的相关知识总结一下,以便 ...
- MySQL 显示命令
虽然现在各种图形化管理工具方便了MySQL的管理,但是偶尔还是需要手动输入指令来使用比较方便,以下是摘抄的一些命令,供自己备忘使用. 1.显示数据库列表. show databases; 2.显示库中 ...
- Git Cheat Sheet
Merge Undo git merge with conflicts $ git merge --abort Archive $ git archive --format zip --output ...
- GPS部标监控平台的架构设计(七)-压力测试
部标监控平台的压力测试是部标检测流程的最后一个检测环节,也是最难的,很多送检的企业平台都是卡壳在这一个环节.企业平台面临的问题如下: 1.对于压力测试的具体指标要求理解含糊,只知道是模拟一万辆车终端进 ...
- dell r710xd 通过远程管理卡安装系统
机器dell r720xd 服务器 远程管理卡:iDRAC7 安装系统CentOS 5.9 64位 1.首先得配置要管理口IP信息及用户名.密码(这里就不做介绍了) 2.登录远程管理 https:// ...
- Linux操作系统备份之二：通过tar拷贝分区实现Linux操作数据的在线备份
http://www.tektea.com/archives/2163.html. 在<Linux操作系统备份之一:使用LVM快照实现Linux操作系统数据的在线备份>文章中,我们介绍了使 ...
- 将abc的全排列输出
#include "iostream" using namespace std; void swap(char a[],int i,int j){ char temp; temp= ...
- 通过jxl 读取excel 文件中的日期，并计算时间间隔
java读取excel里面的日期会出现相差8小时的问题. 比如excel里面有一个日期是:2012-7-2 17:14:03秒,用Cell cell=readSheet.getCell(colNo, ...