jQuery Event Object
What You’ll Learn
Every jQuery handler receives an event object. Properties like event.currentTarget tell you which element’s handler is running during bubbling — essential for delegation, styling, and avoiding confusion with event.target.
currentTarget
Handler owner
this
Usually same
target
Origin element
Delegate
Parent vs child
.proxy
Scope differs
19 guides
Full index
Introduction
When you write $("#btn").on("click", function (event) { ... }), jQuery passes a rich event object as the first argument. That object mirrors the browser’s native event and adds normalized helpers. Two properties confuse beginners most often: event.currentTarget and event.target.
What Is the Event Object?
The event object describes what happened and where handlers run. event.currentTarget is the element whose listener is executing right now as the event bubbles. event.target is the deepest element where the interaction started. Understanding both prevents bugs in nested markup and delegated lists.
Inside a normal handler, event.currentTarget equals this — the element your handler runs on. With delegation, event.currentTarget is the parent you bound to; this is the matched child. Use event.target for the deepest element that received the click.
📝 Syntax
Official jQuery API pattern for event.currentTarget (since 1.3):
$( "p" ).on( "click", function ( event ) {
alert( event.currentTarget === this ); // true
});👀 currentTarget vs this vs target
Three references inside a handler — know which to use:
Event Property Tutorial Index
Search by property name or browse by category. Each tutorial includes syntax, try-it examples, and FAQs.
Event Object Properties
19 tutorialsRead properties on the jQuery event object passed to .on() handlers — currentTarget, target, and related fields.
| Property | Description | Tutorial |
|---|---|---|
event.currentTarget | The DOM element whose handler is running during the bubbling phase — usually equals this, but differs with delegation or jQuery.proxy. | Open |
event.target | The DOM element that initiated the event — deepest click origin; official body nodeName demo and ul delegation toggle; compare with currentTarget and this. | Open |
event.data | Optional object passed to .on() at bind time — read custom fields in handlers, fix loop closure bugs with { value: i }, works with delegation. | Open |
event.delegateTarget | Element where the jQuery handler was attached — the delegation parent in .on('click', 'button', fn); equals currentTarget on direct binds; official .box highlight demo. | Open |
event.preventDefault() | Cancel default browser actions — official link click demo appends to #log; block navigation and form submit; compare with stopPropagation and return false. | Open |
event.isDefaultPrevented() | Returns true if event.preventDefault() was called — inspect default-action state across multiple handlers; official link click false/true demo. | Open |
event.stopImmediatePropagation() | Stop remaining handlers on the same element and bubbling — official p/div demo; compare with stopPropagation; pair with isImmediatePropagationStopped(). | Open |
event.isImmediatePropagationStopped() | Returns true if event.stopImmediatePropagation() was called — inspect handler-queue state on the same element; official button not called/called demo. | Open |
event.stopPropagation() | Stop event bubbling to parent elements — official nested p/div demo; same-element handlers still run; compare with stopImmediatePropagation; pair with isPropagationStopped(). | Open |
event.isPropagationStopped() | Returns true if event.stopPropagation() was called — inspect bubbling state and block parent handlers; official button not called/called demo; W3C DOM Level 3. | Open |
event.metaKey | Boolean property — true when the META key was held (Command on Mac, Windows key on PC); official click demo; compare with ctrlKey, shiftKey, altKey. | Open |
event.which | Number property — normalized key or mouse button since jQuery 1.1.3; official keydown and mousedown demos; 1/2/3 for left/middle/right click; compare with keyCode and button. | Open |
event.namespace | String property — namespace from namespaced binds like click.myPlugin or test.something; official trigger demo; plugin cleanup with .off('.namespace'). | Open |
event.type | String property — base event name since jQuery 1.0 (click, keydown, custom); official anchor alert demo; compare with event.namespace; multi-event handlers. | Open |
event.pageX | Number property — horizontal mouse position relative to the document left edge; official mousemove demo with pageY; compare with clientX and offsetX. | Open |
event.pageY | Number property — vertical mouse position relative to the document top edge; official mousemove demo with pageX; compare with clientY and offsetY. | Open |
event.relatedTarget | Element property — other DOM element in mouseover/mouseout; official anchor mouseout nodeName demo; dropdown menus and compare with target. | Open |
event.result | Last non-undefined handler return on the same dispatch — official two-handler click demo; validation chains, custom events; compare with event.data. | Open |
event.timeStamp | Number property — milliseconds since epoch when the browser created the event; official consecutive-click delta demo; compare with Date.getTime() and performance.now(); Firefox caveat. | Open |
Conclusion
The jQuery event object connects user actions to your handler code. Start with event.currentTarget when you need the element your handler is bound to — especially under delegation or custom scope. Pair it with event.target when nested markup matters.
❓ Frequently Asked Questions
Next: event.currentTarget
Learn handler context, delegation, and when currentTarget differs from this.
About the author
6 people found this page helpful