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区别就介绍到这了。