事件。currentTarget是事件处理程序已经归属的元素 附加的，而不是事件。目标，它标识上的元素 哪个事件发生了，哪个可能是它的后代。

来源:中数

target总是引用addEventListener前面的元素——它是事件产生的元素。 currentTarget告诉你——如果这是一个冒泡的事件——当前附加了事件监听器的元素(如果事件发生，它将触发事件处理程序)。

有关示例，请参阅这个CodePen。如果你打开开发工具并单击方块，你会看到首先div是目标和currentTarget，但是事件气泡上升到主元素-然后主元素变成了currentTarget，而div仍然是目标。注意，要发生冒泡，需要将事件侦听器附加到这两个元素。

最小可运行示例

window.onload = function() { var resultElem = document.getElementById('result') document.getElementById('1').addEventListener( 'click', function(event) { resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>') resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>') }, false ) document.getElementById('2').dispatchEvent( new Event('click', { bubbles:true })) } <div id="1">1 click me <div id="2">2 click me as well</div> </div> <div id="result"> <div>result:</div> </div>

如果你点击:

2 click me as well

然后1监听它，并在结果后面追加:

target: 2
currentTarget: 1

因为在这种情况下:

2是引发事件的元素 1是监听事件的元素

如果你点击:

1 click me

相反，结果是:

target: 1
currentTarget: 1

铬71测试。

一个实验:

document.addEventListener("click", (e) => {
  console.log(e.target, e.currentTarget);
});
document.querySelector("p").click();

输出:

<p></p>
#document

target (<p></p>)似乎是被点击的元素，而currentTarget (#document)是监听点击事件的元素。

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

[消息将在此窗格[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网站)

事件。currentTarget是事件处理程序已经归属的元素 附加的，而不是事件。目标，它标识上的元素 哪个事件发生了，哪个可能是它的后代。

来源:中数

target总是引用addEventListener前面的元素——它是事件产生的元素。 currentTarget告诉你——如果这是一个冒泡的事件——当前附加了事件监听器的元素(如果事件发生，它将触发事件处理程序)。

有关示例，请参阅这个CodePen。如果你打开开发工具并单击方块，你会看到首先div是目标和currentTarget，但是事件气泡上升到主元素-然后主元素变成了currentTarget，而div仍然是目标。注意，要发生冒泡，需要将事件侦听器附加到这两个元素。

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

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