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.

Elliot B.
  • 17,060
  • 10
  • 80
  • 101
  • 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. – JimmiTh Feb 29 '12 at 23:40
  • 4
    Try `new jQuery.Event(nativeEvent)`. I don't know if it will work. requires 1.6 or later. – DwB Feb 29 '12 at 23:40
  • Thanks TheKaneda + DwB -- I'll give those a try and see how it works. Feel free to add as an answer. – Elliot B. Feb 29 '12 at 23:43
  • 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. – Elias Zamaria Feb 29 '12 at 23:50
  • 1
    Yeah, actually, `jQuery.Event()` doesn't normalize anything at all, contrary to what the docs imply (but don't actually state). – JimmiTh Feb 29 '12 at 23:53
  • This is strange, using @DwB approach, the event was partially turned into a jQuery event, .stopPropagation() is on the event object, but not .pageX, see screenshot: http://postimage.org/image/3vdq6w73p/ jQuery must be doing something else to add the .pageX .pageY properties. – Elliot B. Feb 29 '12 at 23:53
  • 1
    AFAIK, `jQuery.Event()` is for creating synthetic events (typically prior to `.trigger()`), not for native event normalization. – Beetroot-Beetroot Mar 01 '12 at 00:18

3 Answers3

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.

JimmiTh
  • 7,389
  • 3
  • 34
  • 50
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)

Domenic
  • 110,262
  • 41
  • 219
  • 271
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/

Beetroot-Beetroot
  • 18,022
  • 3
  • 37
  • 44
  • 2
    That's cool @Elliot.Bradshaw. The most important thing is you've got an answer. – Beetroot-Beetroot Mar 01 '12 at 01:16
  • 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 Apr 02 '13 at 22:47
  • @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 Apr 02 '13 at 23:21
  • @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 Apr 03 '13 at 06:42
  • @todd, if necessary, raise a new question then post a link here so I'm alerted to it. – Beetroot-Beetroot Apr 03 '13 at 06:51