4

请看下面的代码。

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 提供的。

4

1 回答 1

2

怎么会e.currentTarget从第 4 行突变到第 7 行？

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

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

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

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

TL;博士：

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

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

  • 纯 DOM 事件：currentTarget将是null
  • jQuery 事件：currentTarget将保持不变
  • jQuery 委托事件（包括 jQueryMobile 事件）：currentTarget将是实际绑定的目标
于 2013-07-12T10:42:16.707 回答