【前端】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 ...
随机推荐
- imx6 usb otg config 配置
imx6 usb的host和slave配置,配置之后,安装gadget模块,就能够在host和slave之间切换. 参考文档: i.MX 6Dual/6Quad Linux Reference Man ...
- windows + python + dlib
我试了网上的各种教程,结果都是屁话 pip install dlib
- 2003-can't connect to mysql server on 'localhost'(10061) MySQL错误
开始遇到这个问题,我以为是服务没链接,在网上查了下错误,但没解决,后来链接了下端口,结果发现我原来我 端口不对,MySQL端口默认是3306我安装时端口是设的3307.希望能帮到遇到这种问题的人
- BI好比做菜
近日,珠海奥威软件宣布成功签约新世界中国地产(华南),成为该公司在商业智能项目上的坚实合作伙伴,共同打造基于以财务应用为主的决策分析平台. 公司简介 新世界中国地产(港股代号:917)为香港上市公司新 ...
- Power-BI 预警触发的设定
在现实的业务场景,当某一区域的销售额低于一定的值时,那么就要引起重视了.我们希望当发生这种情况时,通过邮件或微信通知用户进行关注.Power-BI 预警触发功能就可以实现这个功能.一.设定公共参数1. ...
- php计算字符串长度
/** * 计算字符串的长度(非字节) * 先用正则将字符串分解为个体单元,然后再计算单元的个数即得出字符串的长度 * from wordpress * @param string $string * ...
- swift 判断字符串长度
projectName.lengthOfBytes(using: String.Encoding(rawValue: String.Encoding.utf16.rawValue)) > 0
- [转]初探Metasploit的自动攻击
1. 科普Metasploit 以前只是个Back Track操作系统(简称:BT) 下的攻击框架,自成继承了后攻击渗透模块,隐隐有成为攻击平台的趋势. 我们都戏称它为美少妇,很简单,msf. 它 ...
- OpenCV整体的模块架构
之前啃了不少OpenCV的官方文档,发现如果了解了一些OpenCV整体的模块架构后,再重点学习自己感兴趣的部分的话,就会有一览众山小的感觉,于是,就决定写出这篇文章,作为启程OpenCV系列博文的第二 ...
- 一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.c ...