JavaScript tips —— target与currentTarget的区别

定义

以下是红宝书的描述

属性/方法	类型	读/写	说明
currentTarget	Element	只读	其事件处理程序当前正在处理事件的那个元素
target	Element	只读	事件的目标

MDN:

currentTarget：当事件遍历DOM时，标识事件的当前目标。它总是引用事件处理程序附加到的元素，而不是event.target，它标识事件发生的元素。

target：一个触发事件的对象的引用。

结论

emmmm，这说的真晦涩，不自己动手还真看不出有啥差别，先给结论吧：currentTarget指的是事件触发后，冒泡到绑定处理程序的元素，就是绑定事件处理程序的元素，target指的是触发事件的元素。

demo

html:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="UTF-8">
 5     <title>currentTarget&target</title>
 6   </head>
 7   <body>
 8     <div id="div1">
 9       <div id="div2">
10         <div id="div3">
11           click me ~
12         </div>
13       </div>
14     </div>
15   </body>
16 </html>

JavaScript:

 1 let div1 = document.getElementById('div1'),
 2     div2 = document.getElementById('div2'),
 3     div3 = document.getElementById('div3');
 4 
 5 div1.addEventListener('click', (ev) => {
 6   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);
 7 });
 8 
 9 div2.addEventListener('click', (ev) => {
10   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);
11 });
12 
13 div3.addEventListener('click', (ev) => {
14   console.log(`target: ${ev.target.id}     currentTarget: ${ev.currentTarget.id}`);
15 });

当单击div3时，事件依次冒泡。但是触发时间的元素为div3，所以target为div3，而从捕获阶段，到冒泡阶段途径了元素div3，div2，div1，绑定事件处理元素的依次为div3，div2，div1，所以currentTarget为div3，div2，div1。

浏览器兼容性

target

在 IE6-8 中，事件模型与标准不同。使用非标准的 element.attachEvent() 方法绑定事件监听器。在该模型中，事件对象有一个 srcElement 属性，等价于target 属性。

target = ev.target || ev.srcElement;

currentTarget

IE6-8中，事件模型与标准不一样，使用非标准的 element.attachEvent() 来绑定事件监听器。该模型中，没有等价于 event.currentTarget 的接口，且 this 指向全局对象。

一种模拟 event.currentTarget 功能的方法是：将监听器包在一个函数中，然后使用 Function.prototype.call 调用这个包装函数，并将元素对象作为第一个参数。这样，this就是想要的值了。