为什么我的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会发生变化？

请注意：所涉及的事件是由jquerymobile提供的vclick事件。

- AppleGrew

---

e.currentTarget没有改变，e是。 - zclark

如果$this还是一样的，那么为什么e会改变呢？ - AppleGrew

演示：http://jsfiddle.net/arunpjohny/bJzWj/6/ - Arun P Johny

@ArunPJohny，你的演示中想要展示什么？ - AppleGrew

请参阅event currentTarget changes after setTimeout。 - Bergi

Answer 1

为什么从第4行到第7行，e.currentTarget会发生变化？

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

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

为什么现在不同了？自定义事件构建发生在每个阶段，您的监听器会得到一个唯一的对象。它的 currentTarget 不会改变。当您使用普通的 click 事件时，您可以观察到这一点。然而，如果您使用移动设备的 vclick 事件，则将使用事件委托。在这里，自定义事件对象被重用。当它触发您的处理程序时，currentTarget 被设置为 <input>。之后，它会被重置为绑定委派的元素 - document。

当您在超时中记录属性时，您将获得所有修改后的属性，而不是与您相关的属性。当您使用 console.log 记录事件对象时，也会发生同样的事情（参见 lazy logging）。

简而言之：

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

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

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

- Bergi