谁能告诉我在JavaScript事件中的currentTarget和target属性的确切区别,以及哪个属性在哪个场景中使用?
当前回答
这里有一个简单的场景来解释为什么需要它。假设你用下面的格式向用户显示了一些消息,但你也想让他们自由地关闭它们(除非你有特殊的精神障碍),所以这里有一些消息窗格:
[消息将在此窗格[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仍然是目标。注意,要发生冒泡,需要将事件侦听器附加到这两个元素。
这里有一个简单的场景来解释为什么需要它。假设你用下面的格式向用户显示了一些消息,但你也想让他们自由地关闭它们(除非你有特殊的精神障碍),所以这里有一些消息窗格:
[消息将在此窗格[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网站)
一个实验:
document.addEventListener("click", (e) => {
console.log(e.target, e.currentTarget);
});
document.querySelector("p").click();
输出:
<p></p>
#document
target (<p></p>)似乎是被点击的元素,而currentTarget (#document)是监听点击事件的元素。
目标=触发事件的元素。
具有事件监听器的元素。
<时尚> 正文* { 保证金: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上。