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 个事件，警报相同的值，我认为它也起着相同的作用但不是在这个 link 我在 SO 中找到：jquery function(event) event.target.id is blank when clicking linked text.

现在我的问题是：

1.) 区别是什么：event.target.id、event.currentTarget.id 和 [=17] =]?

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

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

有人知道为什么吗？

Answer 1

event.target.id 和 this.id 是一样的，第一个是从事件对象访问目标，第二个是通过 jquery 对象访问它。

event.currentTarget.id

The current DOM element within the event bubbling phase.

根据 documentation。

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

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

Answer 2

试试这个例子

<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 将是当 callback 被调用时，调用 event.currentTarget 将是 maindiv 事件冒泡的原因。

`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

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

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

javascript

jquery

javascript-events