event.target.id VS event.currentTarget.id VS this.id

我有以下提供的示例代码：

HTML：

Click here 

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); } 

这三个事件，警告相同的值，我认为它也扮演相同的角色，但不在我在SO中找到的链接： jquery函数（事件）event.target.id在单击链接文本时为空 。

现在我的问题是：

1.）使用： event.target.id ， event.currentTarget.id和this.id什么this.id ？

2.）我什么时候应该使用 event.target.id ， event.currentTarget.id和this.id ？

3.）哪三个更好？

有人有想法和解释为什么？

Answer 1

试试这个例子

 
  SPan 
This is p 
 
 function callback(e, thisObj) { console.log('this = ', thisObj.id); console.log('target = ', e.target.id); console.log('currentTarget = ', e.currentTarget.id); } 

event.target是调度事件的内容。 例如：如果你单击p event.target将是p但是event.currentTarget将是p当p callback将被调用时event.currentTarget将是maindiv当callback将被调用为事件冒泡的原因。

 `this` refers to `event.currentTarget` 

详情请见这个
https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

这是一个同样的问题我认为看到这一个
e.target和e.currentTarget之间的区别

Answer 2

event.target.id和this.id是相同的，在第一个中，您通过jquery对象从第二个事件对象访问目标。

event.currentTarget.id

事件冒泡阶段中的当前DOM元素。

根据它的文件 。

在JavaScript中，事件会冒泡 。 这意味着事件通过事件触发的元素的祖先传播。

你可以检查这个小提琴并检查各种事件属性。