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

我在下面提供了示例代码：

HTML:

<button id = '33' class = "clickme">Click here</button>

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

这 3 个事件提醒相同的值，我认为它也起着相同的作用，但不是在我在 SO 中找到的链接中：单击链接文本时jquery函数（事件）event.target.id为空 https://stackoverflow.com/questions/15700452/jquery-functionevent-event-target-id-is-blank-when-clicking-linked-text.

现在我的问题是：

1.)是什么不同之处使用之间：event.target.id, event.currentTarget.id and this.id?

2.)我什么时候应该use event.target.id, event.currentTarget.id and this.id?

3.)这三者中哪个效果更好？

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

试试这个例子

<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 是调度事件的对象。 例如：如果您点击p event.target将p but event.currentTarget将p when callback of p将被称为event.currentTarget将maindiv when callback将被称为事件冒泡的原因。

`this` refers to `event.currentTarget`

详细请看这个
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

这是一个同样的问题，我想看到这个
e.target 和 e.currentTarget 之间的区别 https://stackoverflow.com/questions/5921413/difference-between-e-target-and-e-currenttarget