jQuery Event Object

Beginner

7 min read

Updated: Nov 2026

19 method guides

Method index

Index

About This Index

This page is the jQuery Event Object index for the tutorial track. Each row links to a full guide with syntax, examples, and FAQs.

Learn the jQuery overview on /jquery. Use this page when you need an event property such as event.target, event.preventDefault(), or event.which.

Beginner path.

Start with event.target and event.currentTarget, then preventDefault() and stopPropagation()—add which and pageX/pageY for keyboard and mouse details.

Syntax

How to Use the Event Object

jQuery passes a normalized event to every .on() handler:

jQuery

$("a").on("click", function (event) {
  console.log(event.type);            // "click"
  console.log(event.target);          // deepest element
  console.log(event.currentTarget);   // element running this handler
  event.preventDefault();             // block navigation
});

$("#list").on("click", "li", function (event) {
  console.log(event.delegateTarget);  // #list
  console.log(event.pageX, event.pageY);
});

$(document).on("keydown", function (event) {
  console.log(event.which, event.metaKey);
});

Browse

jQuery Event Object Table

All Event Object guides in this jQuery tutorial series (19 tutorials).

Targets & Context

5 methods

Which element started the event, which is handling it, and where it was bound.

Method	Description	Tutorial
`event.target`	Deepest element that initiated the event — origin of the click or key.	Try it
`event.currentTarget`	Element whose handler is running during bubbling — usually equals this.	Try it
`event.delegateTarget`	Element where the jQuery handler was attached — the .on() parent in delegation.	Try it
`event.relatedTarget`	Other element involved in mouseover/mouseout (enter/leave partner).	Try it
`event.data`	Optional object passed to .on() at bind time — read custom fields in the handler.	Try it

Cancel & Stop

6 methods

Block defaults, stop bubbling, and inspect whether those calls already ran.

Method	Description	Tutorial
`event.preventDefault()`	Cancel the browser default action — links, form submit, and more.	Try it
`event.isDefaultPrevented()`	Return true if preventDefault() was already called on this event.	Try it
`event.stopPropagation()`	Stop bubbling to parents — handlers on the same element still run.	Try it
`event.isPropagationStopped()`	Return true if stopPropagation() was already called.	Try it
`event.stopImmediatePropagation()`	Stop remaining handlers on this element and all bubbling.	Try it
`event.isImmediatePropagationStopped()`	Return true if stopImmediatePropagation() was already called.	Try it

Keys, Buttons & Position

4 methods

Read keyboard, mouse button, and document coordinates from the event.

Method	Description	Tutorial
`event.which`	Normalized key or mouse button number for keyboard and mouse events.	Try it
`event.metaKey`	True when the META key was held — Command on Mac, Windows key on PC.	Try it
`event.pageX`	Horizontal mouse position relative to the document left edge.	Try it
`event.pageY`	Vertical mouse position relative to the document top edge.	Try it

Type & Meta

4 methods

Inspect event name, namespace, handler return value, and timestamp.

Method	Description	Tutorial
`event.type`	Base event name — click, keydown, or a custom triggered type.	Try it
`event.namespace`	Namespace from binds like click.myPlugin — useful for .off('.myPlugin').	Try it
`event.result`	Last non-undefined value returned by a handler on this dispatch.	Try it
`event.timeStamp`	Milliseconds since epoch when the browser created the event.	Try it

Frequently Asked Questions

What is the jQuery event object?

When you bind .on('click', function (event) { ... }), jQuery passes a normalized event with properties like target, currentTarget, which, and methods like preventDefault(). It wraps the native browser event for consistent cross-browser behavior.

How do event.target and event.currentTarget differ?

event.target is the deepest element that received the event. event.currentTarget is the element whose handler is running now. With delegation, currentTarget (and often this) is the matched child or bound parent depending on how you bind—check each guide.

When should I use preventDefault vs stopPropagation?

preventDefault() blocks the browser default (link navigation, form submit). stopPropagation() stops bubbling to parents. They are independent—you often need one, sometimes both.

What is event.which used for?

It normalizes which key or mouse button was pressed. Prefer it over older keyCode/button fields when writing keydown or mousedown handlers.

Where should I start?

Start with event.target and event.currentTarget, then preventDefault() and stopPropagation(). Add which and pageX/pageY when you need keyboard or mouse coordinates.

Start with event.target

Open the target guide—syntax, examples, and FAQs.

event.target tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

jQuery Event Handler Methods jQuery event.target