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

问题描述

请看下面的代码.

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/ ]

The idea is to trigger the event handler after some fixed delay. When you run the above code, you will get two logs in console. [JSFiddle demo here - 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 行?

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

请注意:有问题的事件是vclick，由jquerymobile提供.

Please note: The event in question is vclick, which is provided by jquerymobile.

推荐答案

e.currentTarget 怎么会从第 4 行变异到第 7 行?

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

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

Because of event bubbling. There is only one event object which is passed to all registered handlers down from the <input> up to the document. On every stage, the currentTarget property is changed to the current target element. After the event left the document, it will be set to null.

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

Yet, the situation is a littlebit different for you. You've got jQuery and jQueryMobile loaded, which add their own event stuff each. jQuery for example constructs normalized Event objects, and it seems Mobile adds another extra layer. You can try to inspect the .originalEvent property.

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

Why is that different now? The custom event construction happens on every stage, and your listener gets a unique object. It's currentTarget does not change. You can observe this when you use the normal click event. Yet, if you use the Mobile's vclick event then event delegation will be used. Here, the custom event object gets reused. When it fires your handler, the currentTarget gets set to the <input>. After that, it gets reset to the element where the delegation was bound to - the document.

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

When you log the properties in the timeout, you will get those from after all the modifications - not those that were relevant to you. The same thing happens when you console.log the event object (see lazy logging).

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

When you access the event properties during the execution of your callback, you can expect them to be accurate.

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

When you access the event properties after the handlers were triggered, then if you're using

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

• plain DOM events: the currentTarget will be null
• jQuery events: the currentTarget will stay the same
• jQuery delegated events (including jQueryMobile ones): the currentTarget will be the actual bound target

这篇关于为什么我的 event.currentTarget 会自动更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！