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例如constructs normalized Event objects，似乎Mobile增加了另一个额外的层。您可以尝试检查.originalEvent属性。

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

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

TL; DR：

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

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

普通DOM事件：currentTarget将为null

jQuery事件：currentTarget将保持不变

jQuery委托事件（包括jQueryMobile事件）：currentTarget将是实际绑定目标

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

1 个答案:

TL; DR：