Javascript javascript中currentTarget属性和target属性之间的确切区别是什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10086427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What is the exact difference between currentTarget property and target property in javascript
提问by Valli69
Can anyone please tell me the exact difference between currentTargetand targetproperty in Javascript events with example and which property is used in which scenario?
任何人都可以通过示例告诉我Javascript 事件中的currentTarget和target属性之间的确切区别以及在哪种情况下使用哪个属性？
回答by Griffin
Basically, events bubbleby default so the difference between the two is:
基本上，默认情况下事件会冒泡，因此两者之间的区别是：
targetis the element that triggered the event (e.g., the user clicked on)currentTargetis the element that the event listener is attached to.
target是触发事件的元素（例如，用户点击）currentTarget是事件侦听器附加到的元素。
See a simple explanation on this blog post.
请参阅此博客文章中的简单说明。
回答by markmarijnissen
target= element that triggered event.
target= 触发事件的元素。
currentTarget= element that has the event listener.
currentTarget= 具有事件侦听器的元素。
回答by user1164937
If this isn't sticking, try this:
如果这不坚持，请尝试以下操作：
currentin currentTargetrefers to the present. It's the most recent target that caught the event that bubbled up from elsewhere.
currentincurrentTarget是指现在。这是捕获从其他地方冒出来的事件的最新目标。
回答by Somesh Sharma
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>If click on the P tag in above code then you will get three alert,and if you click on the div tag you will get two alert and a single alert on clicking the form tag. And now see the following code,
如果点击上面代码中的 P 标签，你会得到三个警告，如果你点击 div 标签，你会得到两个警告和一个点击表单标签的警告。现在看下面的代码，
<style>
body * {
margin: 10px;
border: 1px solid blue;
}
</style>
<script>
function fun(event){
alert(event.target+" "+event.currentTarget);
}
</script>
<form>FORM
<div onclick="fun(event)">DIV
<p>P</p>
</div>
</form>[object HTMLParagraphElement] [object HTMLDivElement]
[对象 HTMLParagraphElement] [对象 HTMLDivElement]
Here event.target is [object HTMLParagraphElement],and event.curentTarget is [object HTMLDivElement]: So
这里 event.target 是 [object HTMLParagraphElement]，而 event.curentTarget 是 [object HTMLDivElement]： 所以
event.target is the node from which the event originated, and event.currentTarget, on the opposite, refers to the node on which current-event listener was attached.To know more see bubbling
event.target 是发起事件的节点，而 event.currentTarget 则相反，指的是当前事件监听器所在的节点。要了解更多信息，请参阅冒泡
Here we clicked on P tag but we don't have listener on P but on its parent element div.
在这里，我们点击了 P 标签，但我们在 P 上没有监听器，而是在它的父元素 div 上。
回答by YogeshBagdawat
event.targetis the node from which the event originated, ie. wherever you place your event listener (on paragraph or span), event.target refers to node (where user clicked).
event.target是事件起源的节点，即。无论您将事件侦听器放置在何处（在段落或跨度上）， event.target 都是指节点（用户单击的位置）。
event.currentTarget, on the opposite, refers to the node on which current-event listener was attached. Ie. if we attached our event listener on paragraph node, then event.currentTarget refers to paragraph while event.target still refers to span. Note: that if we also have an event listener on body, then for this event-listener, event.currentTarget refers to body (ie. event provided as input to event-listerners is updated each time event is bubbling one node up).
event.currentTarget则相反，指的是当前事件侦听器所在的节点。IE。如果我们在段落节点上附加我们的事件侦听器，那么 event.currentTarget 指的是段落，而 event.target 仍然指的是跨度。注意：如果我们在 body 上也有一个事件监听器，那么对于这个事件监听器，event.currentTarget 指的是 body（即，作为输入提供给事件监听器的事件在每次事件冒泡一个节点时更新）。
