javascript - 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 clicking 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.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

这是一个相同的问题，我认为看到这个
Difference between e.target and e.currentTarget