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 callback p将成为event.currentTarget当maindiv被称为事件冒泡原因时，名为callback的{{1}}将为`this` refers to `event.currentTarget`。

create procedure dbo.[Personnel_Pivot](@fromDate date,@toDate date)
as
begin
    SET NOCOUNT ON;
    DECLARE @LoopDate date,@MaxDate date,@InSQL VARCHAR(max),@InSQL2 VARCHAR(max),@BigSql VARCHAR(max)
    SELECT @MaxDate = max(enterdate),@LoopDate = min(enterdate) from [dbo].[PersonnelLog] where cast(enterdate as date) between @fromDate and @toDate
    WHILE @LoopDate <= @MaxDate
    BEGIN
        SET @InSQL = COALESCE(@InSQL + ',','') + '[' + convert(varchar(10),@Loopdate,103) + ']'
        SET @InSQL2 = COALESCE(@InSQL2 + ',','') + '[' + convert(varchar(10),@Loopdate,103)+ ']'
        --print @i
        set @LoopDate= (select distinct MIN(enterdate) from [dbo].[PersonnelLog] where EnterDate>@Loopdate and cast(enterdate as date) between @fromDate and @toDate)
    END
    --print @InSQL2
    set @BigSql=
    '
    select PersonnelID,'+@InSQL2+'
    from
        (
        select convert(varchar(10),cast(enterdate as date),103) as EnterDate,PersonnelID
        from [dbo].[PersonnelLog] 
        ) p
    PIVOT
        (
        count(EnterDate)
        for EnterDate in ('+@InSQL+')
        ) as p2
    '
    --print @BigSQL
    EXECUTE (@BigSQL)
end

详情请见此文件 https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets

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

Answer 2

event.target.id和this.id是相同的，在您通过jquery对象访问它的第二个事件对象中访问目标的第一个。

event.currentTarget.id

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

根据documentation。

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

您可以查看此fiddle并检查各种活动属性。

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

2 个答案: