jQuery event.data

What Is event.data?

event.data is an optional object you pass when binding with .on(). jQuery attaches it to the event object so the handler can read custom fields. Added in jQuery 1.1.

event.data   // Object from .on(..., data, handler) — or undefined

// Direct bind
$("#btn").on("click", { id: 42 }, function (event) {
  event.data.id;   // 42
});

// Delegation
$("#list").on("click", "li", { group: "A" }, handler);

// Official loop pattern — capture i per button
$("button").eq(i).on("click", { value: i }, handler);

How to Use event.data

Pass an object when you bind; read the same object inside the handler.

1. Build a plain object with the values you need ({ value: i }, { id: "save" }).
2. Pass it to .on() before the handler: .on("click", data, handler).
3. For delegation: .on("click", "button", data, handler).
4. Inside the handler, read event.data fields.
5. Do not confuse with .data() on elements — that is a different API.

Pseudocode

data = { key: value }   // optional object at bind time

element.on("click", data, handler)
// or: parent.on("click", "child", data, handler)

when event fires:
    event.data = data   // same object reference from bind
    call handler(event)
    handler may read event.data.key

// Loop trap (var i):
for i from 0 to 4:
    button[i].on("click", { value: i }, handler)
    // event.data.value is correct per button
    // bare i inside handler is often 5 after the loop

Cheat Sheet

Keep these facts handy while wiring handlers with data.

Live Preview

Click a button from the official loop pattern. Compare event.data.value with bare i — same idea as the official jQuery API demo.

Waiting — click a button.

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

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(", ") + "\\n");
  });
}

Click button 2 →
button = 2, event.data.value = 2, i = 5

$("#save").on("click", { action: "save", id: 42 }, function (event) {
  $("#out").text(
    event.data.action + " #" + event.data.id
  );
});

save #42

$("#list").on("click", "li", { list: "todos" }, function (event) {
  $("#out").text(
    event.data.list + ": " + $(this).text()
  );
});

todos: Buy milk

function onAction(event) {
  $("#out").text("Action: " + event.data.id);
}

$("#edit").on("click", { id: "edit" }, onAction);
$("#delete").on("click", { id: "delete" }, onAction);
$("#share").on("click", { id: "share" }, onAction);

Action: delete

$("#item")
  .data("sku", "A-100")
  .on("click", { source: "toolbar" }, function (event) {
    $("#out").text(
      "event.data.source = " + event.data.source + "\\n" +
      ".data('sku') = " + $(this).data("sku")
    );
  });

event.data.source = toolbar
.data('sku') = A-100

Performance Notes

event.data is just a reference stored at bind time — almost free to read. Prefer small plain objects. For large per-element state, use .data() on the element instead.

Key Takeaways