jQuery event.which

What You’ll Learn

event.which returns a Number for the key or mouse button that fired — jQuery’s normalized alternative to keyCode, charCode, and button. This tutorial covers the official keydown and mousedown demos, Enter and Escape shortcuts, comparing with legacy properties, and five try-it labs.

Introduction

When you handle keyboard or mouse input in jQuery, you often need to know which key or button the user pressed. The event.which property answers that with a single Number — no juggling separate legacy fields.

jQuery has exposed event.which since version 1.1.3. For keyboard events it normalizes event.keyCode and event.charCode; the official docs recommend watching which for key input. For mousedown and mouseup, it reports 1 (left), 2 (middle), and 3 (right) — use it instead of event.button.

Understanding event.which

event.which indicates the specific key or button that was pressed:

• Keyboard events — a numeric key code; compare to constants like 13 (Enter) or 27 (Escape).
• Mouse events — on mousedown / mouseup, 1 left, 2 middle, 3 right.
• Normalization — jQuery merges keyCode and charCode behavior into one property.
• Read-only — reflects what the browser reported; you cannot reassign which key fired.

📝 Syntax

Official jQuery API form (since 1.1.3):

event.which

// read inside any .on() handler:
function handler( event ) {
  console.log( "Key or button:", event.which );
}

// keyboard — Enter key:
$( "#search" ).on( "keydown", function ( event ) {
  if ( event.which === 13 ) { /* submit */ }
});

// mouse — left button only:
$( "#area" ).on( "mousedown", function ( event ) {
  if ( event.which === 1 ) { /* left click */ }
});

Type

• Number — key code for keyboard events; button index for mouse down/up.

Return value

• Not a method — a read-only property on the event object passed to your handler.
• Normalized by jQuery — recommended over keyCode, charCode, and button.

Official jQuery API examples

$( "#whichkey" ).on( "keydown", function ( event ) {
  $( "#log" ).html( event.type + ": " + event.which );
});

$( "#whichkey" ).on( "mousedown", function ( event ) {
  $( "#log" ).html( event.type + ": " + event.which );
});

Examples Gallery

Example 1 follows the official keydown demo. Examples 2–5 cover mousedown buttons, Enter submit, Escape close, and which vs keyCode normalization.

$( "#whichkey" ).on( "keydown", function ( event ) {
  $( "#log" ).html( event.type + ": " + event.which );
});

Type in #whichkey → #log shows "keydown: 65" (letter A)
Press Enter → "keydown: 13"
Each key updates type and which in real time

$( "#mousedown-area" ).on( "mousedown", function ( event ) {
  $( "#log" ).html( event.type + ": " + event.which );
});

Left click → "mousedown: 1"
Middle click → "mousedown: 2"
Right click → "mousedown: 3"
jQuery normalizes button — no raw event.button math

$( "#search-form" ).on( "keydown", "#query", function ( event ) {
  if ( event.which === 13 ) {
    event.preventDefault();
    $( "#search-form" ).trigger( "submit" );
    $( "#status" ).text( "Submitted (Enter / which 13)" );
  }
});

Focus #query, press Enter → form submits
#status → "Submitted (Enter / which 13)"
Other keys do nothing — only which === 13 triggers

$( document ).on( "keydown", function ( event ) {
  if ( event.which === 27 && $( "#panel" ).is( ":visible" ) ) {
    $( "#panel" ).hide();
    $( "#log" ).text( "Panel closed (Escape / which 27)" );
  }
});

Open #panel, press Escape → panel hides
#log → "Panel closed (Escape / which 27)"
Global keydown + which 27 is a standard dismiss pattern

$( "#whichkey" ).on( "keydown", function ( event ) {
  $( "#log" ).html(
    "which: " + event.which +
    " | keyCode: " + event.keyCode +
    " | charCode: " + ( event.charCode || 0 )
  );
});

Press A → "which: 65 | keyCode: 65 | charCode: 0"
Press Enter → "which: 13 | keyCode: 13 | charCode: 0"
which and keyCode usually match on keydown — prefer which per jQuery docs

🚀 Common Use Cases

• Keyboard shortcuts — compare event.which to 13, 27, or letter codes in keydown handlers.
• Enter-to-submit — submit search or chat forms when which === 13 without a click.
• Escape-to-close — dismiss modals and panels on which === 27.
• Mouse button filtering — run logic only on left click (which === 1) on mousedown.
• Context menu guard — ignore or handle right click when which === 3.
• Legacy migration — replace split keyCode/charCode checks with a single event.which read.

📝 Notes

• Available since jQuery 1.1.3 — returns a Number for the key or button pressed.
• Keyboard — normalizes event.keyCode and event.charCode; recommended for key input per official docs.
• Mouse — on mousedown and mouseup, 1 left, 2 middle, 3 right — use instead of event.button.
• Read-only property — jQuery sets it from the native event; do not reassign.
• Not a function — access as event.which, never event.which().
• Modern apps may also use event.key and event.code on native events — which remains the jQuery-documented Number API.
• Compare to numeric constants (13, 27) in keydown — keypress-specific charCode branching is rarely needed with which.

💡 Best Practices