jQuery .keydown() Method

What You’ll Learn

The .keydown() method is jQuery’s legacy shorthand for binding and triggering the keydown event. This tutorial covers .keydown(handler) since 1.0, .keydown(eventData, handler) since 1.4.3, no-argument .keydown() as a trigger, migration to .on("keydown") and .trigger("keydown"), and why the binding form is deprecated since jQuery 3.3. See the jQuery keydown event tutorial for the modern API.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .keydown(), .keyup(), .click(), and more. The .keydown() method let you react to keyboard input in one short call: $("#search").keydown(function(e){ if(e.which===13){ ... } }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .keydown() matters when reading older game, search, and admin-panel tutorials in legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("keydown", handler) for binding and .trigger("keydown") for firing.

Understanding the .keydown() Method

The official jQuery API describes .keydown() as a way to bind an event handler to the keydown event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the user presses a key while that element has focus — the same keydown event that .on("keydown") handles today.

When you call .keydown() with no arguments, jQuery synthetically fires the keydown event on each matched element. Bound handlers run once per call. This trigger behavior is equivalent to .trigger("keydown").

📝 Syntax

The .keydown() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("keydown") is preferred:

1. Bind a handler — .keydown( handler ) (since 1.0, deprecated 3.3)

.keydown( handler )

• handler — function executed each time keydown fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "keydown", handler ).

2. Bind with eventData — .keydown( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.keydown( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "keydown", eventData, handler ).

3. Trigger the event — .keydown() (since 1.0)

.keydown()

• No arguments — triggers keydown on every matched element.
• Runs bound keydown handlers.
• Preferred replacement: .trigger( "keydown" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).keydown( function() {
  alert( "Handler for `keydown` called." );
} );

// Modern binding
$( "#target" ).on( "keydown", function() {
  alert( "Handler for `keydown` called." );
} );

// Deprecated trigger
$( "#target" ).keydown();

// Modern trigger
$( "#target" ).trigger( "keydown" );

Return value

• All .keydown() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .keydown() to .on("keydown"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .keydown(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#target" ).keydown( function() {
  alert( "Handler for \`keydown\` called." );
} );

Focus #target input, press any key → alert runs

Repeats while key is held (OS key repeat)

Deprecated — prefer .on("keydown", fn) for new code

$( "#search" ).keydown( { fieldId: "search" }, function( event ) {
  $( "#out" ).text(
    "Field: " + event.data.fieldId + " | key code: " + event.which
  );
} );

Focus #search, press a key → "Field: search | key code: 65" (for A)

eventData.fieldId passed without a closure

Modern: .on("keydown", { fieldId: "search" }, fn)

var count = 0;

$( "#target" ).keydown( function( event ) {
  count++;
  $( "#out" ).text( "Target keydown handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#target" ).keydown();
} );

Press a key in #target → count increments

Click #fire → $("#target").keydown() → same handler runs

No-arg .keydown() is trigger shorthand — prefer .trigger("keydown")

$( "#legacy" ).keydown( function() {
  $( "#out" ).text( "Legacy: .keydown(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "keydown", function() {
  $( "#out" ).text( "Modern: .on('keydown', function(){ ... }) — use this for new code." );
} );

Focus #legacy, press a key → legacy deprecation message

Focus #modern, press a key → modern .on("keydown") message

Behavior is identical — only the API name differs

$( "#target" )
  .keydown( function( event ) {
    if ( event.which === 13 ) {
      event.preventDefault();
    }
    $( "#notice" ).text( "First handler: Enter blocked." ).show();
  } )
  .keydown( function( event ) {
    $( "#result" ).text( "Second handler: key code " + event.which );
  } );

Press any key in #target

First handler shows #notice; Enter gets preventDefault

Second handler updates #result with event.which

Both handlers run in bind order on each keydown

🚀 Common Use Cases

• Reading legacy code — recognize $("#search").keydown(fn) as equivalent to .on("keydown", fn) in older scripts.
• Enter key handling — legacy tutorials bind .keydown() to block or allow Enter in inputs.
• Programmatic trigger — $("#target").keydown() from a test button — replace with .trigger("keydown").
• Shared eventData — $("#field").keydown({ id: "search" }, fn) passes metadata without closures.
• Game and demo code — chained .keydown(fn) calls for movement and action keys.
• Maintaining legacy admin UIs — many jQuery 1.x panels still use .keydown() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .keydown(handler) or .keydown(eventData, handler) in new code. Use .on("keydown") instead.
• Bind with .keydown(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .keydown() triggers the event since jQuery 1.0 — prefer .trigger("keydown").
• .keydown() does not support event delegation — use .on("keydown", "input", fn) for dynamic forms.
• Keyboard events require focus on the target element — click or tab into inputs first.
• Read key codes with event.which inside handlers — jQuery normalizes cross-browser differences.
• Remove handlers with .off("keydown") — not by calling .keydown(undefined).
• For the full modern keydown guide — event.which, global shortcuts, and Enter handling — see the jQuery keydown event tutorial.

💡 Best Practices