24

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.

Improve this question
7
  • 3
    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. Commented Feb 29, 2012 at 23:40
  • 4
    Try new jQuery.Event(nativeEvent). I don't know if it will work. requires 1.6 or later. Commented Feb 29, 2012 at 23:40
  • Thanks TheKaneda + DwB -- I'll give those a try and see how it works. Feel free to add as an answer. Commented Feb 29, 2012 at 23:43
  • 1
    Yeah, actually, jQuery.Event() doesn't normalize anything at all, contrary to what the docs imply (but don't actually state). Commented Feb 29, 2012 at 23:53
  • 1
    AFAIK, jQuery.Event() is for creating synthetic events (typically prior to .trigger()), not for native event normalization. Commented Mar 1, 2012 at 0:18

3 Answers 3

Reset to default
15

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

@Elliot.Bradshaw - jsfiddle.net/Rpgrf - but it's pretty much what Beetrot-Beetrot said.
Answer accepted. First to post on $.event.fix(event) and first to post full working example, thanks!
10

You want jQuery.event.fix.

new jQuery.Event(nativeEvent)

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)

Improve this answer

Comments

6

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/

Improve this answer

5 Comments

That's cool @Elliot.Bradshaw. The most important thing is you've got an answer.
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!!!
@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.
@Beetroot-Beetroot 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.
@todd, if necessary, raise a new question then post a link here so I'm alerted to it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.