currentTarget与target区别
currentTarget与target区别属于前端实例代码，有关更多实例代码大家可以查看。
标题中两个属性都属于事件对象。
有时它们两个返回值完全一样，所以具有一定的迷惑性。
下面将通过代码实例详细分析一下它们之间的区别与应用。
首先看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#ant{
width:100px;
height:60px;
background-color:#ccc;
}
</style>
<script>
window.onload=function(){
let obox = document.getElementById("ant");
obox.onclick = function (ev) {
console.log(event.target.id);
console.log(event.currentTarget.id);
}
}
</script>
</head>
<body>
<div id="ant"></div>
</body>
</html>
点击div元素，然后在控制台查看运行效果。
代码内容截图如下：
点击div元素之后，可以将两个属性返回元素的id属性值在控制台打印出来。
可以看到这两个元素返回值是完全一样的，如果总是一样，那么官方创建两个属性将毫无意义了。
再来看一段代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
#ant{
width:100px;
height:60px;
background-color:#ccc;
}
#inner{
width:50px;
height:30px;
background-color:blue;
}
</style>
<script>
window.onload=function(){
let obox = document.getElementById("ant");
let oinner=document.getElementById("inner");
obox.onclick = function (ev) {
console.clear();
console.log(event.target.id);
console.log(event.currentTarget.id);
}
}
</script>
</head>
<body>
<div id="ant">
<div id="inner"></div>
</div>
</body>
</html>
上述代码点击不同的元素，在控制台打印出不同内容。
两个属性的区别也得以体现：
（1）.点击外层div元素，控制台打印截图如下：
（2）.点击内部div元素，控制台打印截图如下：
首先给出两个属性的概念：
（1）.currentTarget属性返回注册事件处理函数的元素。
（2）.target属性返回触发事件处理函数的元素。
代码分析总结如下：
（1）.注册事件处理函数的元素与触发事件的元素可能是同一个元素，就如点击外层元素。
（2）.注册事件处理函数的元素也可能与触发事件的元素非同一元素，很多事件具有冒泡效果，比如上述代码，点击子元素会触发click事件，根据冒泡原理，事件向上传递到父div元素，并执行注册在其上的事件处理函数，所以点击子元素，target属性返回子元素，currentTarget属性返回当前处理该事件的元素，也就是注册事件处理函数的元素，外层div元素。
特别说明：上面介绍的都是原生JavaScript中的概念，很多库可能已经将其修改。
属性的使用案例：
最常见的是利用事件冒泡来实现委托效果，所谓的委托，就是让自己的事情委托给别人办理。
代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
table {
width: 300px;
height: 60px;
background-color: green;
}
table td {
background-color: white;
}
</style>
<script>
window.onload=function(){
let otable=document.getElementsByTagName("table")[0];
let odiv=document.getElementsByTagName("div")[0];
otable.onclick=function(ev){
odiv.innerHTML=ev.target.innerHTML;
}
}
</script>
</head>
<body>
<table cellspacing="1">
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
<td>单元格四</td>
</tr>
<tr>
<td>单元格五</td>
<td>单元格六</td>
<td>单元格七</td>
<td>单元格八</td>
</tr>
</table>
<div></div>
</body>
</html>
上述代码点击单元格，会将其中的内容写入div中。
代码分析如下：
（1）.我们并没有将事件处理函数注册在每一个td之上，而是利用事件冒泡注册在table之上。
（2）.好处很明显，性能比较好，代码也更为清爽，新添加的td元素具有同样的功能。
（3）.利用target属性即可获取触发事件的元素，也就是我们点击的单元格，然后将其内容写入div。
上面就是委托，本来td单元格的活，交给table去做。
currentTarget与target区别，这样的场景在实际项目中还是用的比较多的，关于currentTarget与target区别就介绍到这了。