Converting a native browser event object to a jQue

问题:

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.

回答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.

回答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.

回答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/