【前端】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++中为什么要将析构函数定义成虚函数
构造函数不可以是虚函数的,这个很显然,毕竟虚函数都对应一个虚函数表,虚函数表是存在对象内存空间的,如果构造函数是虚的,就需要一个虚函数表来调用,但是类还没实例化没有内存空间就没有虚函数表,这根本就是个 ...
- Wrestling Match---hdu5971(2016CCPC大连 染色法判断是否是二分图)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5971 题意:有n个人,编号为1-n, 已知X个人是good,Y个人是bad,m场比赛,每场比赛都有一个 ...
- 关于如何查看MySQL版本：
方法一: 进入mysql cmd, status; 将显示当前mysql的version的各种信息. 方法二: 还是在mysql的cmd下,输入: select version(); 查看MySQL端 ...
- Open Live Writer 安装
Open Live Writer来源 Windows Live Writer在2012年就停止了更新,Open Live Writer是由Windows Live WriterWriter更名而来,是 ...
- 控制反转IOC的依赖注入方式
引言: 项目中遇到关于IOC的一些内容,因为和正常的逻辑代码比较起来,IOC有点反常.因此本文记录IOC的一些基础知识,并附有相应的简单实例,而在实际项目中再复杂的应用也只是在基本应用的基础上扩展而来 ...
- Linux配置notes
终端支持中文输入: locale-gen en_US.UTF-8 export PYTHONIOENCODING=utf-8 export LANG="en_US.UTF-8" e ...
- PHP使用OPENSSL RSA加密解密数据
加密数据有很多种方法,今天我们来看一下OPENSSL RSA的加密办法. 1.首先得安装php的openssl扩展 php -m | grep openssl 执行以上命令,确保已经安装了openss ...
- sql异步执行
/// <summary> /// 按钮事件 异步执行 /// </summary> /// <param name="sender">< ...
- windows远程控制ubuntu---基于ssh
要实现windows下连接ubuntu需要安装以下软件: 1. windows下安装winSCP 2. Ubuntu下安装OpenSSH Server 可以使用命令行安装openSSH Server: ...
- poj 3190 Stall Reservations
http://poj.org/problem?id=3190 Stall Reservations Time Limit: 1000MS Memory Limit: 65536K Total Su ...