28

Can someone help me understand the use of originalEvent in JavaScript? I really can't find a good source of documentation about it.

Google results led me to discussion sites that were too complicated to understand for a newbie.

I recently had a question in SO, and a guy answered it by adding this line of code 

$("#url").bind('paste', function(e) {
    var val = e.originalEvent.clipboardData.getData('text/plain');
 ....

to my existing code, which worked btw.

I would greatly appreciate if someone can help me understand the use of it.

informatik01
  • 16,038
  • 10
  • 74
  • 104
bobbyjones
  • 2,029
  • 9
  • 28
  • 47
  • 1
    See http://stackoverflow.com/questions/16674963/event-originalevent-jquery – hiattp Oct 27 '13 at 12:17
  • 1
    `originalEvent` isn't a JavaScript thing, it's [a jQuery thing](http://api.jquery.com/category/events/event-object/). I've added the `jquery` tag. – T.J. Crowder Oct 27 '13 at 12:23

3 Answers3

33

You are using a JavaScript library called jQuery, which is where the $() function comes from. jQuery wraps several parts of JavaScript to make it easier to use. One of those parts is event handling. In your example, because you're using jQuery to bind to the paste event, the object passed to your callback (e) is a jQuery event object, not a built-in JavaScript event object. The jQuery event object exposes the originalEvent property to give you access to the underlying built-in event object.

In your example you need to get hold of the clipboard data, which isn't available through the jQuery event object so you need to access the original event object to get at it.

informatik01
  • 16,038
  • 10
  • 74
  • 104
joews
  • 29,767
  • 10
  • 79
  • 91
  • some background. i need to capture the data being pasted thus the `paste` event. but why `originalEvent` is needed just to get the data. why cant just a simple `var val = $("#url").val()` work? why is it needed in my case? – bobbyjones Oct 27 '13 at 12:41
  • What is #url, and what are you trying to achieve? – joews Oct 27 '13 at 12:55
  • its an input field, and i need to capture a youtube link, parse it and get the youtube id via regex, and simply print it. – bobbyjones Oct 27 '13 at 13:00
  • 1
    I can't test it right now but I think the paste event is triggered before the value of the target is updated, so if you call $("#url").val() in the event handler you will get the value before the paste occurred. – joews Oct 27 '13 at 13:05
2

Certain events may have properties specific to them. Those can be accessed as properties of the event.originalEvent object.

Source: jQuery Event object

In your example, the clipboardData property of the paste event is accessed via event.originalEvent.

Qantas 94 Heavy
  • 15,750
  • 31
  • 68
  • 83
kol
  • 27,881
  • 12
  • 83
  • 120
  • ok, as i try to understand and relate this to my code. you mean to say that i need to access some type of property in my `paste` event? thus the use of `originalEvent?` – bobbyjones Oct 27 '13 at 12:24
  • Yes. I added a sentence about this at the end of the answer. jQuery wraps browser events into an event object which offers general-purpose event properties, but sometimes you need to access special properties, like the pasted data in case of the paste event. – kol Oct 27 '13 at 12:27
2

Well...originalEvent is not directly from javascript as per my knowledge. it is the one that is triggered by browser. Jquery wraps up some more properties and the original event from browser is wrapped in originalEvent. Here is what i found from jquery site.

"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."

thecodejack
  • 12,689
  • 10
  • 44
  • 59