jQuery event.data

What You’ll Learn

event.data holds the optional object passed to .on() when a handler is bound. This tutorial covers the official for-loop demo, fixing closure bugs, delegation with eventData, multiple properties, and how event.data differs from .data().

Introduction

Handlers often need extra context — which row was clicked, what ID to delete, or which menu action to run. jQuery lets you attach a plain object when binding: .on("click", { id: 42 }, handler). Inside the callback, read it as event.data.id.

The official jQuery API documents event.data since version 1.1. Its most famous use is fixing the classic loop closure bug: without eventData, every button in a for loop may report the same final index. Passing { value: i } preserves each iteration’s value on the event object.

Understanding event.data

event.data is a snapshot of the object you supplied to .on() at bind time:

• Direct bind — $("#btn").on("click", { action: "save" }, fn) → event.data.action is "save".
• Delegation — $("#list").on("click", "li", { mode: "edit" }, fn) → same event.data for every matching child click.
• Loop fix — .on("click", { value: i }, fn) stores each i separately per handler.
• Not element storage — unlike $("#el").data(), it travels with the handler binding, not the DOM node.

📝 Syntax

Pass eventData as the argument before the handler in .on() (since 1.7):

.on( events [, selector ], eventData, handler )

// direct binding:
$( "#btn" ).on( "click", { id: 1, label: "Save" }, function ( event ) {
  console.log( event.data.id, event.data.label );
});

// delegation:
$( "#menu" ).on( "click", "button", { action: "delete" }, function ( event ) {
  console.log( event.data.action );
});

Type

• Object — any plain object jQuery can copy onto the event; strings, numbers, nested objects, and booleans are fine.

Return value

• Not a method — a read-only property on the event object for the current handler invocation.
• Reflects the eventData object passed when this specific handler was bound.

Official jQuery API example

var logDiv = $( "#log" );
for ( var i = 0; i < 5; i++ ) {
  $( "button" ).eq( i ).on( "click", { value: i }, function ( event ) {
    var msgs = [
      "button = " + $( this ).index(),
      "event.data.value = " + event.data.value,
      "i = " + i
    ];
    logDiv.append( msgs.join( ", " ) + " " );
  });
}

Examples Gallery

Example 1 follows the official jQuery event.data demo. Examples 2–5 cover simple payloads, delegation actions, multiple properties, and comparing closure i with event.data.value.

var logDiv = $( "#log" );
for ( var i = 0; i < 5; i++ ) {
  $( "button" ).eq( i ).on( "click", { value: i }, function ( event ) {
    var msgs = [
      "button = " + $( this ).index(),
      "event.data.value = " + event.data.value,
      "i = " + i
    ];
    logDiv.append( msgs.join( ", " ) + " " );
  });
}

Click button 0 → event.data.value = 0, i = 5 (closure)
Click button 3 → event.data.value = 3, i = 5 (closure)
event.data.value is correct for each button; bare i is wrong after loop

$( "#save" ).on( "click", { id: 42, label: "Save draft" }, function ( event ) {
  console.log( event.data.id + ": " + event.data.label );
});

42: Save draft

$( "#rows" ).on( "click", ".remove", { action: "delete" }, function ( event ) {
  if ( event.data.action === "delete" ) {
    $( this ).closest( "tr" ).remove();
  }
});

Click Remove on any row → row is deleted
event.data.action is "delete" for every delegated click

$( ".sync" ).on( "click", {
  url: "/api/sync",
  method: "POST",
  confirm: true
}, function ( event ) {
  if ( event.data.confirm && !window.confirm( "Sync now?" ) ) return;
  $.ajax( { url: event.data.url, method: event.data.method } );
});

Click Sync → confirm dialog (if confirm: true)
AJAX uses url and method from event.data

for ( var i = 0; i < 3; i++ ) {
  $( "#bad-" + i ).on( "click", function () {
    console.log( "bad i =", i );
  });
  $( "#good-" + i ).on( "click", { value: i }, function ( event ) {
    console.log( "good value =", event.data.value );
  });
}

#bad-* buttons always log i = 3
#good-* buttons log good value = 0, 1, or 2 correctly

🚀 Common Use Cases

• Loop bindings — pass { value: i } in for loops (official demo).
• Toolbar actions — one handler function, different event.data.action per button.
• Delegated tables — .on("click", ".edit", { mode: "edit" }, fn).
• Plugin config — pass defaults merged with per-element options at bind time.
• Testing — bind with predictable payloads; trigger with extra args when needed.
• Avoid globals — keep IDs and labels on event.data instead of window state.

📝 Notes

• Available since jQuery 1.1 — returns an Object.
• Only present when you pass eventData to .on() (or compatible bind APIs).
• Not the same as $("#el").data() — that stores data on elements.
• Changing event.data in the handler does not update the stored bind payload for future events.
• Delegation form: .on(type, selector, data, handler) — data sits before the function.
• Modern alternative in loops: let block scope or IIFE — eventData remains the jQuery-native fix.

💡 Best Practices