jQuery .keydown() Method

What Is .keydown()?

.keydown() is jQuery’s legacy shorthand for the keydown event (since 1.0). Pass a handler to bind; call it with no arguments to trigger. Binding forms are deprecated since jQuery 3.3.

$("#el").keydown(fn)           // bind (deprecated)
$("#el").keydown(data, fn)     // bind + eventData (deprecated)
$("#el").keydown()             // trigger handlers

// Modern replacements:
$("#el").on("keydown", fn)
$("#el").trigger("keydown")

How to Use .keydown()

Recognize the shorthand in old code, then migrate to .on / .trigger.

1. Find .keydown(fn) or bare .keydown() in legacy scripts.
2. Rewrite binds as .on("keydown", fn) (add eventData as the middle arg if needed).
3. Rewrite triggers as .trigger("keydown").
4. Keep using event.which for key codes — that part does not change.

Pseudocode

if called with handler:
    // deprecated since 3.3
    bind handler to "keydown" on each element
    (same as .on("keydown", handler))

if called with (eventData, handler):
    bind with data → event.data
    (same as .on("keydown", eventData, handler))

if called with no arguments:
    fire "keydown" on each matched element
    (same as .trigger("keydown"))

Cheat Sheet

Legacy vs modern — keep this table for quick migrations.

Live Preview

Compare the deprecated shorthand with the modern API. Press a key (hold to see repeat), or click Trigger to fire handlers.

$("#field").keydown(fn)  // deprecated bind
→ press a key to fire

/* prefer .on("keydown", fn) */

jQuery Examples

Short demos of the legacy shorthand and how to migrate. Prefer .on / .trigger in new code.

$("#target").keydown(function () {
  console.log("Handler for keydown called.");
});

Focus #target, press a key →
Handler for keydown called.

(Hold → may repeat; deprecated — prefer .on("keydown", fn))

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

Press "A" → Field: search | key: 65

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

var count = 0;

$("#target").keydown(function () {
  count++;
  $("#out").text("Fired " + count + " time(s)");
});

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

Click #fire → .keydown() → Fired 1 time(s)

Prefer: $("#target").trigger("keydown")

// Legacy
$("#legacy").keydown(function () {
  console.log("via .keydown(fn)");
});

// Modern (prefer this)
$("#modern").on("keydown", function () {
  console.log("via .on(\"keydown\", fn)");
});

Press either field → same keydown event
→ use only .on / .trigger in new projects

var count = 0;

$("#target").keydown(function (event) {
  if (event.which === 13) {
    event.preventDefault();
  }
  count++;
  $("#log").text("Called " + count + " | key: " + event.which);
});

// Prefer: $("#target").on("keydown", function (event) { … });

Press "A" → Called 1 | key: 65
Press Enter → Called 2 | key: 13
(Enter default blocked)

Performance Notes

Migrating to .on does not change performance — it clarifies intent and unlocks delegation. Optimize the handler body, not the binding API.

Key Takeaways