event.originalEvent jQuery

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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.