event.target.id VS event.currentTarget.id VS this.id答案

【问题标题】：event.target.id VS event.currentTarget.id VS this.idevent.target.id VS event.currentTarget.id VS this.id
【发布时间】：2015-09-08 11:12:15
【问题描述】：

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

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.)这三个中哪个效果更好？

有人知道原因并解释一下吗？

【问题讨论】：

标签： javascript jquery javascript-events

【解决方案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 当@98765433被称为事件冒泡的原因。

`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

【讨论】：

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

【解决方案2】：

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

event.currentTarget.id

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

根据它是documentation。

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

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

【讨论】：