为什么我的event.currentTarget会自动更改？

Question

请看下面的代码。

function deferredClick(f) {
    return (function (e) {
        var $this = $(e.currentTarget);
        console.log('Actual target: ', e.currentTarget);

        window.setTimeout(function () {
            console.log('Target I get here: ', e.currentTarget);
            f.call($this.get(0), e);
        }, 1000);
    });
}

function clickResponder(e) {
    var $this = $(e.currentTarget);
    $("#out").html('Clicked - ' + $this.val());
}

$('input[type="button"]').on('vclick', deferredClick(clickResponder));

这个想法是在一些固定的延迟之后触发事件处理程序。 运行上面的代码时，您将在控制台中获得两个日志。 [这里的JSFiddle演示 - http://jsfiddle.net/D7GTP/ ]

Actual target: <input class="ui-btn-hidden" type="button" value="click me" data-disabled="false">
Target I get here: Document

为什么e.currentTarget从第4行变为第7行？

请注意：有问题的事件是vclick ，由jquerymobile提供。

Answer 1

为什么e.currentTarget从第4行变为第7行？

因为事件冒泡。 只有一个事件对象从<input>传递到所有已注册的处理程序，直到document 。 在每个阶段， currentTarget属性都更改为当前目标元素。 事件离开document ，它将被设置为null 。

然而，对你而言，情况有点不同。 你已经加载了jQuery和jQueryMobile，它们各自添加了自己的事件。 例如，jQuery 构造了规范化的Event对象 ，而且似乎Mobile增加了另一个额外的层。 您可以尝试检查.originalEvent属性。

为什么现在有所不同？ 自定义事件构造发生在每个阶段，并且您的侦听器获取唯一对象。 它的currentTarget不会改变。 使用普通click事件时，您可以观察到这一点。 但是，如果您使用Mobile的vclick事件，则将使用事件委派。 这里，自定义事件对象被重用。 当它触发你的处理程序时， currentTarget被设置为<input> 。 之后，它将重置为委派绑定的元素 - document 。

在超时中记录属性时，您将从所有修改后获取这些属性 - 而不是那些与您相关的修改。 当console.log事件对象时，会发生同样的事情（请参阅延迟日志记录 ）。

TL; DR：

在执行回调期间访问事件属性时，可以预期它们是准确的。

在触发处理程序后访问事件属性时，如果您正在使用

• plain DOM事件： currentTarget将为null
• jQuery事件： currentTarget将保持不变
• jQuery委托事件（包括jQueryMobile）： currentTarget将是实际的绑定目标