event.target.id VS event.currentTarget.id VS this.id [英] event.target.id VS event.currentTarget.id VS this.id

问题描述

我有以下提供的示例代码：

I have this sample code provided below:

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为空白。

These 3 events, alerts the same value and I thought it also plays the same role but not in this link I found in SO: jquery function(event) event.target.id is blank when clicking linked text.

现在我的问题是：

1。）使用之间的差异是什么： event.target.id ， event.currentTarget.id 和 this.id ？

1.) What is the difference between using: event.target.id, event.currentTarget.id and this.id?

2。）我应该何时使用 event.target.id ，事件.curr entTarget.id 和 this.id ？

3。）在这三个中哪个更好？

3.) And which works better among these three?

有没有人有想法和解释原因？

Does anybody have an idea and explanation why?

推荐答案

试试这个例子

<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是调度事件的内容。
ex：如果你点击 p event.target 将是 p 但是 event.currentTarget 将 p 当回调的 p 将被称为 event.currentTarget 将是 maindiv 当回调时，将调用事件冒泡的原因。

event.target is what dispatches the event. ex: if you click on p event.target will be p but event.currentTarget will be p when callback of p will be called event.currentTarget will be maindiv when callback will be called cause of event bubbling.

`this` refers to `event.currentTarget`

详细信息请参阅此内容

https://developer.mozilla.org/en- US / docs / Web / API / Event / Comparison_of_Event_Targets

See this one for details
https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

这是一个相同的问题我认为看到这一个

e.target和e.currentTarget之间的差异

Here is a same question i think see this one
Difference between e.target and e.currentTarget

这篇关于event.target.id VS event.currentTarget.id VS this.id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！