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

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

HTML:

这3个事件、警报具有相同的值，我认为它也扮演相同的角色，但不在我在SO中找到的链接中：

现在我的问题是：

1.使用：

event.target.id

、

event.currentTarget.id

和

this.id

之间有什么区别

2.我应该在什么时候使用

event.target.id

、

event.currentTarget.id

和

this.id

3。）这三种方法中哪一种效果更好

---

有人知道为什么吗？

event.target.id和

this.id

是一样的，第一个是从事件对象访问目标，第二个是通过jquery对象访问目标

event.currentTarget.id

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

根据它的名字

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

您可以检查此项并检查各种事件属性

试试这个例子

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

有关详细信息，请参见此项

这里有一个同样的问题，我想你会看到这个问题的

---

啊，这就是为什么。。。谢谢

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

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

`this` refers to `event.currentTarget`