为什么我的事件.currentTarget正在自动更改

How come my event.currentTarget is changing automatically?

本文关键字：我的 事件 currentTarget 为什么      更新时间：2023-09-26

请查看下面的代码。

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

为什么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；博士：

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

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

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