jQuery event.type

What You’ll Learn

event.type is a String that names the event — "click", "keydown", or any custom name you trigger. This tutorial covers the official anchor demo, multi-event shared handlers, custom events, delegated switch patterns, comparing with event.namespace and originalEvent.type, and five try-it labs.

Introduction

Every jQuery handler receives an event object. Among its properties, event.type answers: what kind of event fired? The value is a string — the base event name without any namespace suffix. For a user click it is "click"; for a custom save hook it might be "saveDraft".

jQuery has exposed event.type since version 1.0. The official docs show the simplest case: bind click on anchors and alert(event.type) displays "click". The property works with native DOM events, jQuery .trigger(), and fully custom event names. When you bind multiple types to one function — .on("click mouseenter", fn) — read event.type inside to branch behavior.

Understanding event.type

event.type describes the nature of the event as a plain string:

• Base name only — for click.myPlugin, type is "click"; the suffix lives on event.namespace.
• Native and synthetic — browser events, jQuery triggers, and custom names all set type consistently.
• Read-only — jQuery assigns it when the event is created; you cannot change which type fired.
• Shared handlers — one callback bound to several types uses event.type to decide what to run.

📝 Syntax

Official jQuery API form (since 1.0):

event.type

// read inside any .on() handler:
function handler( event ) {
  console.log( "Event type:", event.type );
}

// multi-event bind — branch on type:
$( "#box" ).on( "click mouseenter mouseleave", function ( event ) {
  if ( event.type === "click" ) { /* ... */ }
});

Type

• String — the base event name, e.g. "click", "keydown", "saveDraft".

Return value

• Not a method — a read-only property on the event object passed to your handler.
• Does not include namespace dots — compare with the full bind string via type + namespace together.

Official jQuery API example

$( "a" ).on( "click", function ( event ) {
  alert( event.type ); // "click"
});

Examples Gallery

Example 1 follows the official anchor click demo. Examples 2–5 cover multi-event handlers, custom triggers, delegated switch patterns, and type vs namespace on namespaced clicks.

$( "a" ).on( "click", function ( event ) {
  alert( event.type ); // "click"
});

Click any <a> link → alert shows: click
event.type is always the base name — never "click.something"

$( "#box" ).on( "click mouseenter mouseleave", function ( event ) {
  $( "#log" ).text( "Fired: " + event.type );
});

Click #box → "Fired: click"
Mouse enter → "Fired: mouseenter"
Mouse leave → "Fired: mouseleave"

$( "#editor" ).on( "saveDraft", function ( event ) {
  if ( event.type === "saveDraft" ) {
    $( "#status" ).text( "Draft saved (type: " + event.type + ")" );
  }
});

$( "#save" ).on( "click", function () {
  $( "#editor" ).trigger( "saveDraft" );
});

Click #save → trigger saveDraft on #editor
#status → "Draft saved (type: saveDraft)"
Custom names work the same as native types on event.type

$( "#app" ).on( "click submit keydown", function ( event ) {
  switch ( event.type ) {
    case "click":
      $( "#log" ).text( "Click inside #app" );
      break;
    case "submit":
      event.preventDefault();
      $( "#log" ).text( "Form submitted" );
      break;
    case "keydown":
      $( "#log" ).text( "Key: " + event.type );
      break;
  }
});

Click in #app → "Click inside #app"
Submit form → "Form submitted" (default prevented)
Keydown in #app → "Key: keydown"

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

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

// Plain click for comparison:
$( "#btn" ).on( "click", function ( event ) {
  console.log( "type:", event.type, "namespace:", event.namespace || "(none)" );
});

pluginA handler → type: click  namespace: pluginA
pluginB handler → type: click  namespace: pluginB
plain click handler → type: click  namespace: (none)
All three share type "click" — namespace distinguishes binds

🚀 Common Use Cases

• Logging and debugging — print event.type when many handlers attach to one element.
• Shared multi-event handlers — .on("click mouseenter mouseleave", fn) branches on type.
• Custom event routing — .trigger("saveDraft") sets type to your application event name.
• Delegated containers — one #app listener for click, submit, and keydown via switch.
• Plugin vs app code — type stays "click"; use namespace to tell plugins apart.
• Testing — assert event.type after simulated triggers in unit tests.

📝 Notes

• Available since jQuery 1.0 — returns a String describing the event nature.
• Read-only property — jQuery sets it; you cannot reassign which type fired.
• Base name only — for click.myPlugin, type is "click"; namespace is on event.namespace.
• Works with native DOM events, .trigger(), and custom event names.
• Multi-bind handlers rely on event.type to distinguish click vs mouseenter vs keydown in one function.
• Prefer event.type over event.originalEvent.type in jQuery handlers — originalEvent may be absent on pure triggers.
• Not a function — access as event.type, never event.type().

💡 Best Practices