javascript - 为什么我的 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

How come e.currentTarget is mutating from line 4 to line 7?

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

但是，您的情况有点不同。您已经加载了 jQuery 和 jQueryMobile，它们各自添加了自己的事件内容。例如 jQuery constructs normalized Event objects ，移动设备似乎又增加了一层。您可以尝试检查.originalEvent属性。

为什么现在不一样了？自定义事件构造发生在每个阶段，并且您的监听器获得一个唯一的对象。这是currentTarget不会改变。当您使用正常的 click 时，您可以观察到这一点。事件。然而，如果您使用手机的vclick event 那么将使用事件委托(delegate)。在这里，自定义事件对象被重用。当它触发你的处理程序时，currentTarget设置为<input> 。之后，它会重置为委托(delegate)绑定(bind)到的元素 - document .

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

TL；博士:

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

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

• 普通 DOM 事件:currentTarget将是null
• jQuery 事件:currentTarget将保持不变
• jQuery 委托(delegate)事件(包括 jQueryMobile 事件):currentTarget将是实际的绑定(bind)目标