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

Question

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

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 function(event) event.target.id is blank when click linked text。

现在我的问题是：

1）有什么区别使用之间：event.target.id，event.currentTarget.id和this.id？

2.)我什么时候应该使用 event.target.id,event.currentTarget.id和this.id?

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

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

Answer 1

试试这个例子

<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.targetwill be pbut event.currentTargetwill be pwhen callbackof pwill be called event.currentTargetwill be maindivwhen callbackwill be called 事件冒泡的原因。

`this` refers to `event.currentTarget`

有关详细信息，请参阅此
https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

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