javascript event.target.id VS event.currentTarget.id VS this.id
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32456290/
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
event.target.id VS event.currentTarget.id VS this.id
提问by Makudex
I have this sample code provided below:
我在下面提供了这个示例代码：
HTML:
HTML：
<button id = '33' class = "clickme">Click here</button>
JS:
JS：
$(document).on("click",".clickme",function(event){
var eti = event.target.id;
var eci = event.currentTarget.id;
var ti = this.id;
alert ("1: " + eti + " 2: " + eci + " 3: " + ti);
}
These 3 events, alerts the same value and I thought it also plays the same role but not in this link I found in SO: jquery function(event) event.target.id is blank when clicking linked text.
这 3 个事件，警报相同的值，我认为它也起着相同的作用，但不是在我在 SO 中找到的这个链接中：jquery function(event) event.target.id is blank when clicklinks text。
Now my question is:
现在我的问题是：
1.)What is the differencebetween using: event.target.id, event.currentTarget.idand this.id?
1）有什么区别使用之间：event.target.id，event.currentTarget.id和this.id？
2.)When should I useevent.target.id, event.currentTarget.idand this.id?
2.)我什么时候应该使用event.target.id,event.currentTarget.id和this.id?
3.)And which works better among these three?
3.)这三个中哪个更好用？
Does anybody have an idea and explanation why?
有没有人有想法和解释为什么？
采纳答案by intekhab
Try this example
试试这个例子
<div id="maindiv" onclick="callback(event, this);">
<span id="span" onclick="callback(event, this);"> SPan</span>
<p id="p" onclick="callback(event, this);">This is p </p>
</div>
function callback(e, thisObj) {
console.log('this = ', thisObj.id);
console.log('target = ', e.target.id);
console.log('currentTarget = ', e.currentTarget.id);
}
event.target is what dispatches the event.
ex: if you click on pevent.targetwill be pbut event.currentTargetwill be pwhen callbackof pwill be called event.currentTargetwill be maindivwhen callbackwill be called cause of event bubbling.
event.target 是调度事件的对象。例如：如果你点击pevent.targetwill be pbut event.currentTargetwill be pwhen callbackof pwill be called event.currentTargetwill be maindivwhen callbackwill be called the cause of event bubbling。
`this` refers to `event.currentTarget`
See this one for details
https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
有关详细信息，请参阅此
https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
Here is a same question i think see this one
Difference between e.target and e.currentTarget
这是一个相同的问题，我认为这是一个
e.target 和 e.currentTarget 之间的区别
回答by KAD
event.target.idand this.idare the same, in the first one you are accessing the target from the event object in the second you are accessing it through jquery object.
event.target.id并且this.id是相同的，在第一个中，您从事件对象访问目标，在第二个中，您通过 jquery 对象访问它。
event.currentTarget.id
event.currentTarget.id
The current DOM element within the event bubbling phase.
事件冒泡阶段中的当前 DOM 元素。
As per it's documentation.
根据它的文档。
In JavaScript, events bubble. This means that an event propagates through the ancestors of the element the event fired on.
在 JavaScript 中，事件冒泡。这意味着事件通过触发事件的元素的祖先传播。
You can check this fiddleand check various event properties.
您可以检查这个小提琴并检查各种事件属性。
