? jQuery Event Object

? Quick Overview

The jQuery Event Object is an object that is automatically passed to event handler functions. It contains detailed information about the event such as the event type, target element, mouse position, key pressed, and methods to control event behavior.

? Key Concepts

Automatically passed as a parameter to event handlers
Provides information about the event
Works consistently across browsers
Allows controlling default behavior and propagation

? Syntax / Theory

The event object is usually accessed using a parameter commonly named event or e.

? View Code Example

// Basic syntax of accessing the event object
$("button").click(function(event){
console.log(event.type);
});

? Code Examples

? View Code Example

// Accessing event properties
$("#box").on("mousemove", function(e){
$("#info").text("X: " + e.pageX + " Y: " + e.pageY);
});

? Live Output / Explanation

Explanation

As you move the mouse inside the box, the pageX and pageY properties of the event object show the mouse position relative to the document.

? Interactive Example 1: Mouse Tracking

Move your mouse inside the area below to see event data update in real time.

Move mouse here

? Interactive Example 2: Click & Key Tracker

Click the button or type in the input field to see how the event object captures different data.

Event Type -

Target Tag -

Key Code -

? View Code Example

// Tracking multiple event properties
$("#testBtn, #testInput").on("click keydown", function(e){
  $("#eventType").text(e.type);
  $("#eventTarget").text(e.target.tagName);
  $("#eventWhich").text(e.which || "N/A");
});

? Use Cases

Detecting mouse and keyboard actions
Preventing default browser behavior
Building custom interactive UI components
Tracking user interactions

✅ Tips & Best Practices

Use e.preventDefault() to stop default actions
Use e.stopPropagation() to stop event bubbling
Prefer short variable name e for readability
Always rely on the event object instead of browser-specific APIs

? Try It Yourself

Log e.target when clicking different elements
Detect which key is pressed using keydown event
Prevent form submission using the event object
Display event type dynamically on the page