jQuery Mouse Events

What You’ll Learn

Mouse events let JavaScript respond when users click, hover, or move the pointer. jQuery’s .on() and .off() provide a consistent API across browsers. Start with the click event — the most common interaction in web UIs.

Introduction

Every interactive web page relies on events — something happens in the browser, and your code responds. Mouse events cover pointer actions: clicking buttons, toggling panels, closing modals, and selecting list items. jQuery wraps the browser’s native event system so you write one handler that works everywhere.

What Are jQuery Mouse Events?

Mouse events are named strings passed to .on() — "click", "dblclick", "mouseenter", and others. The handler receives an event object with details about the interaction. Unlike deprecated shortcuts like .click(fn), .on("click", fn) is the modern, flexible approach that also supports delegation and namespaced unbinding.

📝 Syntax

Minimal click binding workflow:

$("#btn").on("click", function() {
  alert("Clicked!");
});
$("#target").trigger("click");
$("#list").on("click", "li", function() {
  $(this).toggleClass("done");
});