jQuery event.namespace

What You’ll Learn

event.namespace is a String property with the namespace from a namespaced bind like click.myPlugin or test.something. This tutorial covers the official demo, plugin patterns, .off('.namespace') cleanup, comparing with event.type, and custom events.

Introduction

jQuery lets you attach a namespace to event names by adding a dot suffix when binding: .on("click.myPlugin", fn). That keeps plugin handlers separate from app code and makes teardown easy with .off(".myPlugin").

Inside the handler, event.namespace tells you which namespace fired — useful when one function listens to several namespaced variants. jQuery has exposed this String property since version 1.4.3.

Understanding event.namespace

This property answers one question: which namespace was on the event that invoked this handler?

• Namespaced bind — .on("test.something", fn) sets event.namespace to "something".
• No namespace — plain .on("click", fn) gives event.namespace as "" (empty string).
• Read-only — a property, not a function; set by jQuery from the bind/trigger string.
• Multiple segments — click.foo.bar can yield event.namespace of "foo.bar".

📝 Syntax

Official jQuery API form (since 1.4.3):

event.namespace

// bind with a namespace:
$( "button" ).on( "click.myPlugin", function ( event ) {
  console.log( event.type );       // "click"
  console.log( event.namespace );  // "myPlugin"
});

Parameters

• None — namespace is a property, not a method.

Return value

• String — the namespace specified when the event was triggered; empty string when none was used.

Official jQuery API example

$( "p" ).on( "test.something", function ( event ) {
  alert( event.namespace );
});

$( "button" ).on( "click", function () {
  $( "p" ).trigger( "test.something" );
});

Examples Gallery

Example 1 follows the official jQuery demo. Examples 2–5 cover plugins, cleanup, branching, and custom events.

$( "p" ).on( "test.something", function ( event ) {
  alert( event.namespace );
});

$( "button" ).on( "click", function () {
  $( "p" ).trigger( "test.something" );
});

Button click triggers test.something on <p>
Alert / log shows: something

$( "#btn" ).on( "click.myPlugin", function ( event ) {
  console.log(
    "type:", event.type,
    "namespace:", event.namespace
  );
});

// App code can still use plain click:
$( "#btn" ).on( "click", function ( event ) {
  console.log( "app click — namespace:", event.namespace ); // ""
});

type: click  namespace: myPlugin
app click — namespace: (empty string)

function initPlugin() {
  $( "#box" ).on( "click.myPlugin mouseenter.myPlugin", onPluginEvent );
}

function destroyPlugin() {
  $( "#box" ).off( ".myPlugin" );
}

function onPluginEvent( event ) {
  $( "#log" ).text( event.type + " — namespace: " + event.namespace );
}

After init — click/hover log namespace: myPlugin
After destroyPlugin() — .off(".myPlugin") removes those handlers only

function onNotify( event ) {
  if ( event.namespace === "success" ) {
    $( "#toast" ).text( "Saved!" ).addClass( "ok" );
  } else if ( event.namespace === "error" ) {
    $( "#toast" ).text( "Failed." ).addClass( "err" );
  }
}

$( document ).on( "notify.success notify.error", onNotify );
$( "#ok" ).on( "click", function () { $( document ).trigger( "notify.success" ); });
$( "#bad" ).on( "click", function () { $( document ).trigger( "notify.error" ); });

trigger notify.success → namespace success → "Saved!"
trigger notify.error → namespace error → "Failed."

$( "#widget" ).on( "widget.refresh widget.destroy", function ( event ) {
  $( "#status" ).text(
    "widget." + event.namespace + " fired (type: " + event.type + ")"
  );
});

$( "#refresh" ).on( "click", function () {
  $( "#widget" ).trigger( "widget.refresh" );
});

$( "#destroy" ).on( "click", function () {
  $( "#widget" ).trigger( "widget.destroy" );
});

Refresh → widget.refresh fired (type: widget) namespace: refresh
Destroy → widget.destroy fired (type: widget) namespace: destroy

🚀 Common Use Cases

• jQuery plugins — bind click.myPlugin and tear down with .off(".myPlugin").
• Shared handlers — branch on event.namespace for success vs error custom events.
• Testing — assert namespace in unit tests after .trigger("type.ns").
• Debugging — log type + namespace when many handlers share one element.
• Widget APIs — expose refresh / destroy as namespaced custom events.
• Avoid collisions — isolate third-party binds from application click handlers.

📝 Notes

• Available since jQuery 1.4.3 — returns a String.
• Read-only property — not a function.
• Empty namespace is "", not undefined or null.
• Do not confuse with event.type — type is the base event name only.
• .off(".namespace") removes handlers in that namespace across event types on the element.
• Primarily used by plugin authors; app code benefits when sharing handlers across namespaced binds.

💡 Best Practices