Key Properties of the jQuery Event Object

When handling DOM events, jQuery wraps the browser's native event in a normalized jQuery.Event object to ensure consistent behavior across different web browsers. This article outlines the primary properties provided by the jQuery Event object, detailing what data they expose and how developers can use them to handle user input, retrieve event context, and inspect event states efficiently.

1. event.type

Contains the string name of the event triggered, such as "click", "keydown", "mouseover", or "submit". This is useful when a single handler is attached to multiple event types.

2. event.target

Identifies the DOM element that initiated the event. Because of event bubbling, event.target refers to the innermost element where the user interaction actually took place, not necessarily the element listening for the event.

3. event.currentTarget

Points to the DOM element currently processing the event handler in the bubbling/capturing phase. Inside a standard jQuery handler, event.currentTarget is equivalent to the this keyword.

4. event.relatedTarget

Identifies the secondary element involved in mouse movement events. For mouseover or mouseenter, it indicates the element the pointer came from. For mouseout or mouseleave, it indicates the element the pointer entered.

5. event.pageX and event.pageY

Provide the horizontal (pageX) and vertical (pageY) coordinates of the mouse pointer relative to the top-left corner of the entire document. jQuery normalizes these values so developers do not need to calculate scroll offsets manually.

6. event.which

Normalizes keyboard and mouse button codes across different browsers:

• Mouse events: Returns 1 for the left button, 2 for the middle button, and 3 for the right button.
• Keyboard events: Returns the numeric character code or key code for the key pressed.

7. event.data

Contains any custom data passed to the jQuery event binding method (such as .on()) at the time the handler was registered.

$("#btn").on("click", { message: "Hello" }, function(event) {
    console.log(event.data.message); // Outputs: "Hello"
});

8. event.namespace

Stores the namespace string specified when the event was bound (e.g., "myPlugin" for an event bound as "click.myPlugin"). This property is particularly useful when developing modular plugins or writing selective event teardowns.

9. event.timeStamp

Returns the difference in milliseconds between the time the event occurred and the document creation time (or the epoch, depending on the browser implementation).

10. event.result

Holds the value returned by the previously executed event handler for that event, provided multiple handlers are bound to the same element.

11. event.originalEvent

Provides a reference to the native, un-normalized browser event object created by the browser engine. This gives access to browser-specific properties that jQuery does not normalize directly.