目标=触发事件的元素。

具有事件监听器的元素。

默认情况下，事件冒泡。所以两者的区别是:

目标是触发事件的元素(例如，用户点击) currentTarget是事件监听器附加到的元素。

目标=触发事件的元素。

具有事件监听器的元素。

如果这还不行，试试这个:

currentTarget中的current指的是当前。这是最新的目标，捕捉到从其他地方冒出来的事件。

这里有一个简单的场景来解释为什么需要它。假设你用下面的格式向用户显示了一些消息，但你也想让他们自由地关闭它们(除非你有特殊的精神障碍)，所以这里有一些消息窗格:

[消息将在此窗格[x]]中显示]

[消息将在此窗格[x]]中显示]

[消息将在此窗格[x]]中显示]

当用户单击每个按钮上的[x]按钮时，必须删除整个对应的窗格。

下面是窗格的HTML代码:

<div class="pane">
  A message will be here
  <span class="remove-button">[x]</span>
</div>

现在，您希望将单击事件侦听器添加到哪里?用户点击[x]，但你想要删除窗格，所以:

如果你将click事件监听器添加到[x]，那么你将不得不在DOM中找到它的父类并删除它…这是可能的，但丑陋的和“DOM依赖”。 如果你将点击事件监听器添加到窗格中，点击“窗格上的所有地方”将删除它，而不仅仅是点击它的[x]按钮。

那么我们能做什么呢?我们可以使用事件系统的“Bubbles Up”特性:

“无论是否存在任何事件处理程序，都会引发事件并在DOM树中冒泡。”

在我们的示例中，这意味着即使我们将事件处理程序添加到窗格中，我们也能够捕获由单击[x]按钮引起的事件(因为事件会冒泡)。因此，在引发事件的位置和捕获并处理事件的位置之间可能存在差异。

它被举起的地方将在事件中。目标，以及它在事件中被捕捉的位置。currentTarget(我们当前处理它的地方)。所以:

let panes = document.getElementsByClassName("pane");
for(let pane of panes){
    pane.addEventListener('click', hndlr);
}
function hndlr(e){
    if(e.target.classList.contains('remove-button')){
        e.currentTarget.remove();
    }
}

(这个例子的出处来自JavaScript.info网站)

<时尚> 正文* { 保证金:10 px; 边框:1px纯蓝色; ｝ > < /风格 <形式onclick = "警报(形式)“>形式 < div onclick = "警报(div)“> DIV < p onclick = "警报(“p”)“P > < / P > < / div > > < /形式

如果点击上面代码中的P标签，那么你会得到三个警报，如果你点击div标签，你会得到两个警报和一个警报，点击表单标签。 现在看下面的代码，

<时尚> 正文* { 保证金:10 px; 边框:1px纯蓝色; ｝ > < /风格 < >脚本 函数有趣(事件){ 警报(事件。目标+ " " + event.currentTarget); ｝ > < /脚本 < >形式 < div onclick = "乐趣(事件)“> DIV < p > p > < / p < / div > > < /形式 我们刚刚从P和form标签中删除了onclick，现在当我们点击P标签时，我们只得到一个警告:

[htmlparagraph片段][htmlvevement对象]

这里的事件。目标是[object html分段ement]，而事件。curentTarget是[object HTMLDivElement]: 所以

事件。目标是事件产生的节点， 而且 事件。相反，currentarget指向附加了当前事件监听器的节点。知多见冒泡

这里我们点击了P标签，但是我们没有监听器在P上，而是在它的父元素div上。