jQuery event.result

What You’ll Learn

event.result stores the last non-undefined return value from a handler that ran earlier during the same event dispatch on the same element. This tutorial covers the official two-handler click demo, validation chains, undefined guard behavior, custom event pipelines, and comparing with event.data and $.trigger.

Introduction

When multiple handlers are bound to the same element and event, jQuery runs them in registration order during one dispatch. Each handler can return a value — and jQuery exposes the most recent non-undefined return to later handlers as event.result.

Unlike event.data (bind-time payload) or the second argument to $.trigger() (trigger-time payload), event.result captures what an earlier handler returned during execution. jQuery has forwarded it since version 1.3 — especially useful for custom events and handler chains on the same element.

Understanding event.result

This property answers one question: what did the previous handler in this dispatch return?

• Same dispatch — only handlers on the same element, same event, same trigger count.
• Last non-undefined — returning undefined (or nothing) does not replace an earlier result.
• Read-only — a property on the event object; not a method.
• Any type — strings, numbers, objects, or false to signal cancellation in some patterns.

📝 Syntax

Official jQuery API form (since 1.3):

event.result

// typical pattern:
$( "button" ).on( "click", function () {
  return "hey";
});
$( "button" ).on( "click", function ( event ) {
  $( "p" ).html( event.result );
});

Parameters

• None — result is a property, not a function.

Return value

• Object — the last non-undefined value returned by a prior handler on this dispatch, or undefined if none returned a value yet.

Official jQuery API example

$( "button" ).on( "click", function ( event ) {
  return "hey";
});
$( "button" ).on( "click", function ( event ) {
  $( "p" ).html( event.result );
});

Examples Gallery

Example 1 follows the official jQuery click demo. Examples 2–5 cover validation chains, undefined guard behavior, custom event pipelines, and a four-way comparison with event.data.

$( "button" ).on( "click", function ( event ) {
  return "hey";
});
$( "button" ).on( "click", function ( event ) {
  $( "p" ).html( event.result );
});

Click button — paragraph shows: hey

$( "#submit" ).on( "click", function () {
  var val = $( "#email" ).val();
  if ( !val || val.indexOf( "@" ) === -1 ) {
    return "Invalid email address";
  }
});
$( "#submit" ).on( "click", function ( event ) {
  if ( event.result ) {
    $( "#error" ).text( event.result ).show();
  } else {
    $( "#error" ).hide();
  }
});

Bad email → #error shows "Invalid email address"
Valid email → #error hidden

$( "button" ).on( "click", function () {
  return "first";
});
$( "button" ).on( "click", function () {
  // implicit undefined — does not overwrite
});
$( "button" ).on( "click", function ( event ) {
  $( "#log" ).text( "result: " + event.result );
});

#log shows "result: first" — middle handler skipped update

$( "#widget" ).on( "beforeSave", function () {
  return { step: 1, msg: "validated" };
});
$( "#widget" ).on( "beforeSave", function ( event ) {
  var prev = event.result || {};
  return { step: prev.step + 1, msg: prev.msg + ", enriched" };
});
$( "#widget" ).on( "beforeSave", function ( event ) {
  $( "#log" ).text( JSON.stringify( event.result ) );
});
$( "#go" ).on( "click", function () {
  $( "#widget" ).trigger( "beforeSave" );
});

Trigger beforeSave → {"step":2,"msg":"validated, enriched"}

$( "#btn" ).on( "click", { source: "bind" }, function () {
  return "from-return";
});
$( "#btn" ).on( "click", { source: "bind" }, function ( event ) {
  var lines = [
    "event.data.source: " + event.data.source,
    "event.result: " + event.result
  ];
  $( "#log" ).html( lines.join( "
" ) );
});
// programmatic trigger with extra arg:
$( "#trigger" ).on( "click", function () {
  $( "#btn" ).trigger( "click", [ { source: "trigger" } ] );
});

event.data.source: bind
event.result: from-return
(trigger arg is separate from event.result)

🚀 Common Use Cases

• Validation pipelines — validator returns error string; UI handler reads event.result.
• Custom event hooks — plugins return status objects for downstream handlers.
• Multi-step widgets — accumulate computed values across handlers on one element.
• Cancel patterns — early handler returns false; later handlers inspect result.
• Testing triggers — simulate handler chains without shared globals.
• Legacy plugin APIs — read previous plugin return on the same dispatch.

📝 Notes

• Available since jQuery 1.3 — returns an Object (any non-undefined return type).
• Read-only property — set indirectly by prior handler returns during dispatch.
• Only the last non-undefined return is stored — not every handler’s return history.
• Returning undefined (or nothing) does not overwrite a previous result.
• Scoped to the same element and event on one dispatch — not cross-element.
• Not the same as event.data or $.trigger() second argument — see Compare section.

💡 Best Practices