Converting a native browser event object to a jQuery event object

Question

I am assigning an event handler function to an element through the native browser onclick property:

document.getElementById('elmtid').onclick = function(event) { anotherFunction(event) };

When I'm in anotherFunction(event), I want to be able to use the event object like I would with the event object you get in jQuery through the .on() method. I want to do this because the jQuery event object has properties and methods such as .pageX, .pageY and .stopPropagation() that work across all browsers.

So my question is, after I've passed in the native browser event object into anotherFunction(), how can I turn it into a jQuery event? I tried $(event), but it didn't work.

The obvious question here is: why don't you just use jQuery .on, .bind, .click etc to assign your event handling functions? The answer: I'm building a page that has a huge table with lots of clickable things on it. Unfortunately this project requires that the page MUST render quickly in IE6 and IE7. Using .on et al in IE6 and IE7 creates DOM leaks and eats up memory very quickly (test for yourself with Drip: http://outofhanwell.com/ieleak/index.php?title=Main_Page). Setting onclick behavior via .onclick is the only option I have to render quickly in IE6 and IE7.

Scab

Not putting this as an answer, because it's just an idea - not an idea I like. You could do $.event.fix(event) - which is what jQuery does internally. The keyword being "internally", meaning you shouldn't assume it will still work the same way in the next version of jQuery. – Expectant

Try new jQuery.Event(nativeEvent). I don't know if it will work. requires 1.6 or later. – Canonicate

Thanks TheKaneda + DwB -- I'll give those a try and see how it works. Feel free to add as an answer. – Scab

If event.pageX doesn't work, then maybe try event.originalEvent.pageX. I haven't tried this myself so I am not 100% sure of it. – Would

Yeah, actually, jQuery.Event() doesn't normalize anything at all, contrary to what the docs imply (but don't actually state). – Expectant

This is strange, using @Canonicate approach, the event was partially turned into a jQuery event, .stopPropagation() is on the event object, but not .pageX, see screenshot: postimage.org/image/3vdq6w73p jQuery must be doing something else to add the .pageX .pageY properties. – Scab

AFAIK, jQuery.Event() is for creating synthetic events (typically prior to .trigger()), not for native event normalization. – Roveover

Answer 1

Too long for a comment... Because the documentation is a bit vague on this... (I'm looking at 1.7.1 in the following)

jQuery.Event(event, props):

• creates a new object
• sets its type property to the event's type property.
• sets isDefaultPrevented by normalized calls to all the ways to check if default is prevented.
• sets originalEvent to reference the event you passed in.
• adds an arbitrary set of properties provided by the props object argument.
• sets a timestamp.
• marks object "fixed".

What you get is basically a new object with a few additional properties and a reference to the original event - no normalization other than isDefaultPrevented.

jQuery.event.fix(event):

• ignores objects that have already been marked "fixed".
• makes a writable copy (by way of jQuery.Event()) and normalizes the properties mentioned here.

ETA:

Actually, looking closer at the code, jQuery.event.fix() should work - in the way described by @Beetroot-Beetroot. It's all that jQuery does to create the jQuery event object in an event dispatch.

Expectant

@Elliot.Bradshaw - jsfiddle.net/Rpgrf - but it's pretty much what Beetrot-Beetrot said. – Expectant

Answer accepted. First to post on $.event.fix(event) and first to post full working example, thanks! – Scab

Answer 2

You want jQuery.event.fix.

new jQuery.Event(nativeEvent)

• Stores nativeEvent as the originalEvent property.
• Handles some bubbling logic.
• Timestamps the event
• Marks the event as "jQuery's got this"
• Gives it all the bubbling/default-preventing functions.

Note at this point the event doesn't have any "eventy" properties, just originalEvent, timeStamp, and the bubbling/default-preventing functions.

jQuery.event.fix(nativeEvent)

• Does all the above
• Figures out specific fixes ("fix hook") it will need to apply depending on the event type
• Copies over a default set of properties from nativeEvent, plus specific ones from the fix hook
• Fixes cross-browser issues with the target and metaKey properties
• Applies specific cross-browser fixes and normalizations for the fix hook.

Deckhouse

Answer 3

Try this:

document.getElementById('elmtid').onclick = anotherFunction;

with:

function anotherFunction(evt){
    evt = $.event.fix(evt || window.event);//Note need for cross-browser reference to the native event
    ...
}

http://jsfiddle.net/Wrzpb/

Roveover

That's cool @Elliot.Bradshaw. The most important thing is you've got an answer. – Roveover

This is what I was looking for! evt = $.event.fix(evt || window.event); I don't know why that little snippet is so hard to find. Seems like something that should be in jQuery's docs. Thank you!!! – Extra

@todd, it should be noted that this is a pretty weird thing to do. It uses a feature of jQuery to fix non-jQuery javascript - ie. a hybrid approach. With jQuery installed on the page, it's typically better to opt for a 100% jQuery solution, though I understand that may mean translating and re-qualifying old code. – Roveover

@Roveover OK, thank you. Maybe there's some other issue with my code then. I was having problems with the jQuery event object in Firefox and this seemed to have fixed it, but I will go back and take a closer look. – Extra

@todd, if necessary, raise a new question then post a link here so I'm alerted to it. – Roveover