How come my event.currentTarget is changing automatically?

Question

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.

Answer 1

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