50

I am currently immersed in the jQuery learning center. I'm going from start to end.

I just read this paragraph:

It's also important to note that the event object contains a property called originalEvent, which is the event object that the browser itself created. jQuery wraps this native event object with some useful methods and properties, but in some instances, you'll need to access the original event via event.originalEvent for instance. This is especially useful for touch events on mobile devices and tablets.

The last sentence, 'This is especially useful for touch events on mobile devices and tablets.', really sparked my interest. but this is as much as the learning center goes into originalEvent thus far.

Does anyone know of good resources for a more intensive study/practice for event.originalEvent specifically in relation to touch events/mobile devices?

Pang
  • 9,564
  • 146
  • 81
  • 122
BryanK
  • 1,211
  • 4
  • 15
  • 33

3 Answers3

53

event.originalEvent is usually just the native event (also described here).

However, if the browser is compatible, and the event was a touch event then that API will be exposed through event.originalEvent.

The short answer is that event.originalEvent is not always the same, it depends on which event type triggered the handler, and on the environment of the browser.

Travis J
  • 81,153
  • 41
  • 202
  • 273
  • 2
    What do you mean by 'native event'? What is that in contrast to? – chopper draw lion4 Oct 30 '14 at 23:22
  • 1
    @chopperdrawlion4 The event class defined by the browser (i.e. `window.Event`), in contrast to jQuery's class which it defines (i.e. `jQuery.Event`/`$.Event`). – 1j01 Jun 21 '15 at 01:31
  • 2
    Please note that `event.originalEvent` can be present under some circumstances and not others, making it possible in some circumstances to [test how an event handler was triggered](https://stackoverflow.com/a/10255830/3478010). – Roamer-1888 Jul 20 '17 at 09:28
16

I have a case which I needed to use event.originalEvent the problem was trying to get an instance of a dropped file via drag and drop using the drop event, this is what happened

var files = event.dataTransfer.files; // Gives error: trying to get property of undefined

while writing

var files = event.originalEvent.dataTransfer.files; // Works fine

That means jQuery doesn't wrap the native browser event with all its APIs like the File API in this example, so to get access to those excluded properties and functions from the jQuery event we must use event.originalEvent. Hope that helps someone.

Mohyaddin Alaoddin
  • 2,465
  • 1
  • 19
  • 14
  • 1
    I happened to use this event.originalEvent too. My situation is when I pass a paste event to a function in js, Firefox browser need this event.originalEvent.clipboardData to get the pasted text. event.clipboaradData is undefined. IE seems to have a different result though. – shrimp rice Mar 16 '17 at 22:10
4

jQuery knows standard events and conforms them for different browsers. but when there's no standard event jQuery fails to conform the event object but has a failsafe originalEvent that keeps the original served object by the browser.

for example mousewheel and DOMMouseScroll need event.originalEvent too, since there is no support for wheel event.

Nereo Costacurta
  • 7,693
  • 4
  • 21
  • 27