currentTarget与target
先看代码：
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>蚂蚁部落</title> <style type="text/css"> #ant{ width:100px; height:60px; }#inner{ width:50px; height:30px; }</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"><title>蚂蚁部落</title><style>table { width: 300px; height: 60px; }table td { }</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去做。ul,li类似。
浙公网安备 33010602011771号