jQuery Event Object
FREE
Overview
Any modern web application would be impossible to imagine without an event. The mechanism for creating an interactive web page is called an event. jQuery is intelligent enough to handle any event that occurs on an HTML page. Let us first attempt to define an event.
General Introduction to Event Object
Interaction is at the core of web pages. Users undertake a variety of actions, such as moving their mice over the website, clicking on items, and typing in text boxes, which are all examples of events. Apart from these user events, there are a bunch of others that occur, such as when the page is loaded, when the video begins or is paused, and so on.
An event is fired whenever something interesting happens on the page, which means that the browser basically announces that something has happened. This announcement enables developers to "listen" for events and respond appropriately. In most web apps, the user must do some action in order to execute an operation.
For instance, a user might click the save button to store the edited data on a web page. In this case, clicking on the button is a user action that causes the click event to be triggered and the click event handler (function) to save data.
About jQuery Events
A jQuery Event is the consequence of an action detected by jQuery (JavaScript). When one of these events occurs, you can create a custom function to perform almost anything with it. Event Handlers is the term used to describe these unique functions.
These methods, which include .click(), .focus(), .blur(), .change(), and others, are shorthand for jQuery's .on() method. The on method is helpful when you want to pass an object containing many events and handlers when you want to pass data to the event handler, when you are working with custom events, or when you want to tie the same handler function to multiple events.
Introduction to Event Object in jQuery
The callback function only accepts one parameter; when the handler is called, the JavaScript event object is given via it.
Although the handler is typically bound with enough context to know exactly what has to be done when it is triggered, there are some properties you would need to access. Thus the event item is often unnecessary, and the parameter is omitted.
The event object will always be provided to the event handler. The majority of the original event's properties are copied over and normalized to the new event object.
jQuery.Event Constructor
When using the trigger, the jQuery.Event constructor is available and can be used. The new operator is not required. Check the documentation for triggers to learn how to use it with your own event object.
Example:
Using the "new" operator, create a new jQuery.Event object:
Create an artificial click event:
Starting with jQuery 1.6, you can also pass an object to jQuery.Event() and its properties will be set to the newly created Event object.
Add event properties to a new jQueryEvent object:
Using keyCode 64, trigger an artificial keydown event:
Event Properties
| Sl. No | Method | Description |
|---|---|---|
| 1 | event.currentTarget | The current DOM element in the bubble phase of the event. |
| 2 | event.data | An optional data object passed to the event method when binding the currently executing handler. |
| 3 | event.delegateTarget | Returns the element with the currently invoked jQuery event handler associated with it. |
| 4 | event.isDefaultPrevented() | Returns whether event.preventDefault() was ever called for this event object. |
| 5 | event.isImmediatePropagationStopped() | This method checks whether eventstopImmediatePropagation() was ever called on this event object. |
| 6 | event.isPropagationStopped() | Returns whether event.stopPropagation() was ever called for this event object. |
| 7 | event.metaKey | Indicates whether the Windows key or the Command key (on the Mac keyboard) was pressed when the event was triggered. |
| 8 | event.namespace8 | Returns the namespace specified when the event was raised. |
| 9 | event.pageX | Returns the position of the mouse relative to the left edge of the document. |
| 10 | event.pageY | The mouse position relative to the top edge of the document is returned. |
| 11 | event.preventDefault() | Calling this method does not trigger the default action of the event. |
| 12 | event.relatedTarget | Returns the other DOM elements involved in the event, if any. |
| 13 | event.result | The last or previous value returned by the event handler fired for this event. |
| 14 | event.stopImmediatePropagation() | Prevents the other handlers from executing and prevents the event from creating bubbles in the DOM tree. |
| 15 | event.stopPropagation() | Prevents events from bubbling up the DOM tree, preventing parent handlers from receiving event notifications. |
| 16 | event.target | An event's source element is returned. |
| 17 | event.timeStamp | Returns the difference in milliseconds between the time the event was fired and January 1, 1970. |
| 18 | event.type | Returns the type of the triggered event. |
| 19 | event.which | Indicates the specific key or button pressed for the key or mouse event. |
Examples of Event Properties
jQuery standardizes the following properties for consistency across browsers:
- target
- relatedTarget
- pageX
- pageY
- which
- metaKey
and so on...
Event.target
The target attribute can be the element registered for the event or its descendants. The event.target property returns the element that triggered the event.
Example:
Event.relatedTarget
An event.relatedTarget property in jQuery is used to return which element entered or exited on mouse movement.
Example: The code below returns the related target of an element:
Event.pageX
Position of the mouse relative to the document's left edge.
Event.pageY
Position of the mouse relative to the top of the document.
Example for pageX and pageY: The following code returns the position of the mouse pointer.
Event.which
The event.which property normalizes event.keyCode and event.charCode. It is recommended that you check event.which for keyboard key input.
event.which also normalizes the pressure of the buttons (mouse down and mouse up), returning 1 for the left button, 2 for the center, and 3 for the right one.
The event.which property is used to return which keyboard key or mouse button was pressed for the event.
Example: The code below returns the keyboard key pressed.
Event.metaKey
Returns a Boolean (true or false) value indicating whether the META key was pressed when the event was triggered. This key can be mapped to an alternate key name on some platforms.
On Macintosh keyboards, the META key is associated with the Command key (⌘).
On Windows keyboards, the META key is mapped to the Windows key.
Example:
Conclusion
- We learned about jQuery events, examples of them, event objects, jQuery event object examples with sample core codes to try, event properties, and other topics.
- You should now have a better understanding of event handler capabilities and be well on your way to writing your own code.