jQuery .mouseenter() Method — Deprecated Shorthand

What Is the .mouseenter() Method?

.mouseenter() is a shorthand for binding or triggering the mouseenter event (pointer enters; children do not re-fire). With a handler it binds; with no arguments it triggers. Prefer .on / .trigger in new code.

$("#box").mouseenter(fn)           // bind (deprecated)
$("#box").mouseenter(data, fn)     // bind + eventData (deprecated)
$("#box").mouseenter()             // trigger (prefer .trigger)

// Modern:
$("#box").on("mouseenter", fn)
$("#box").trigger("mouseenter")

How to Use .mouseenter()

Know the three signatures, then map them to the modern API.

1. Select element(s): $("#box").
2. Bind (legacy): .mouseenter(function (event) { ... }).
3. Optional data (1.4.3+): .mouseenter({ key: "v" }, handler) → event.data.
4. Trigger (legacy): .mouseenter() with no args — or use .trigger("mouseenter").

Pseudocode

function mouseenter(element, handler?):
    if handler given:
        bind "mouseenter" → handler   // like .on("mouseenter", handler)
    else:
        trigger "mouseenter"          // like .trigger("mouseenter")

// Prefer naming the event explicitly with on / trigger

Cheat Sheet

Quick map from shorthand to modern calls.

Live Preview

Run presets that show bind, eventData, and no-arg trigger via .mouseenter().

Handler ran via .mouseenter(fn).

jQuery Examples

Short snippets for legacy .mouseenter(). Prefer the modern forms in new work — use Try It Yourself to experiment.

$("#target").mouseenter(function () {
  console.log("Handler ran via .mouseenter(fn).");
});

Handler ran via .mouseenter(fn).

$(".card").mouseenter({ zone: "header" }, function (event) {
  console.log("zone:", event.data.zone);
  console.log("id:", $(this).data("id"));
});

zone: header
id: promo

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

$("#fire").click(function () {
  $("#target").mouseenter();  // same idea as .trigger("mouseenter")
});

Handler for mouseenter called.

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

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

via .on("mouseenter", fn)

Performance Notes

Switching to .on / .trigger does not slow you down — it clarifies intent and unlocks delegation.

Key Takeaways