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

时间:2015-09-08 11:12:16

标签: javascript jquery javascript-events

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

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.idevent.currentTarget.idthis.id之间的差异是什么?

2。)我应该何时使用 event.target.idevent.currentTarget.idthis.id

3。)在这三者中效果更好?

有人有想法和解释原因吗?

2 个答案:

答案 0 :(得分:3)

试试这个例子

<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.targetpevent.currentTargetp callback p将成为event.currentTargetmaindiv被称为事件冒泡原因时,名为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

答案 1 :(得分:0)

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

event.currentTarget.id

  

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

根据documentation

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

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