为什么我的event.currentTarget会自动更改？ [英] How come my event.currentTarget is changing automatically?

问题描述

请看下面的代码。

  function deferredClick（f）{
 return（function（function（ e）{
 var $ this = $（e.currentTarget）; 
 console.log（'Actual target：'，e.currentTarget）; 
 
 window.setTimeout（function （）{
 console.log（'我得到的目标：'，e.currentTarget）; 
 f.call（$ this.get（0），e）; 
}，1000 ）; 
}）; 
} 
 
函数clickResponder（e）{
 var $ this = $（e.currentTarget）; 
 $（＃out）。html（'Clicked  - '+ $ this.val（））; 
} 
 
 $（'input [type =button]'）。on（'vclick'，deferredClick（clickResponder））; 
  

想法是在一些固定延迟后触发事件处理程序。运行上面的代码时，您将在控制台中获得两个日志。 [这里的JSFiddle演示 - http://jsfiddle.net/D7GTP/ ]

 实际目标：< input class =ui-btn-hiddentype =buttonvalue =click medata-disabled =false> ; 
目标我到达：凭证
  

为什么 e.currentTarget 从第4行变为第7行？

请注意：相关事件为 vclick ，由jquerymobile提供。

解决方案

如何来自 e.currentTarget 是否从第4行变为第7行？

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

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

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

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

TL; DR：

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

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

• 普通DOM事件： currentTarget 将 null


• jQuery事件： currentTarget 将保持不变


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

Please have a look at the code below.

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));

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

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

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

解决方案

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

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.

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.

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.

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).

TL;DR:

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

• 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会自动更改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！