前端|event.target与event.currentTarget的区别
前端|event.target与event.currentTarget的区别
本文首发于微信公众号："算法与编程之美"
前言
event.target事件和event.currentTarget事件，经常被人们混淆。因为它们两个有时候的返回值是完全一样的，因此很具有迷惑性。然而如果真的是一样的，那当初官方就不会做这样没有意义的事了。下面我就结合我所学的知识来给大家讲一下，这两者的区别。
定义
Event.target：返回触发事件的元素；
Event.currentTarget：返回绑定事件的元素。
解释
我写了两个简单的demo，结合这两个demo，大家马上就可以理解它们二者的区别在哪里。
<body> <div id="bai" style="background-color: #CC5522; width: 12.5rem;height: 12.5rem;"> <a href="" style="background-color: cadetblue;">点击一下</a> </div> </body> <script type="text/javascript"> var bai = document.getElementById("bai"); bai.onclick = function(event) { var tar = event.target; var tagName = tar.nodeName.toLowerCase(); alert("触发事件的元素是:" + tagName);/* 当我点击a标签的时候，网页就会提醒我“触发事件的元素是：a”； 当我点击外层div标签的时候，网页则会提醒我“触发事件的元素：div”。*/ } |
|---|
我们接着看第二个demo：
<body> <div id="bai" style="background-color: #CC5522; width: 12.5rem;height: 12.5rem;"> <a href="" style="background-color: cadetblue;">点击一下</a> </div> </body> <script type="text/javascript"> var bai = document.getElementById("bai"); bai.onclick = function(event) { alert("被点击了"); /* 无论我点击里面的a标签还是外层的div标签，网页给我的提示都是“被点击了” */ } |
|---|
对比一下两个demo，不难发现，我都是将点击事件绑定在div上面的，但是在第一个demo里面我是利用的target事件返回的被点击的标签的名称。而在第二个demo里面，我仅仅让点击事件返回“被点击了”。而无论是不是直接点击的div，点击事件都会被发起。
所以当div里的a标签被点击时，也就是当我们用鼠标点击了div内的这个超链接时，这个被我们点击的a标签就是触发事件的标签了，也就是event.target;而整个点击事件是绑定在div上的，所以不管点击了哪里，这个div都是事件的发起者，即就是event.currentTarget。
不知道大家是否明白了呢？
END