jQuery Events

Events are actions that happen on a webpage — a user clicks a button, moves the mouse, presses a key, or submits a form. jQuery makes it simple to detect these actions and respond to them with code.

This topic covers the most common jQuery event methods, how to bind them to elements, and how to use the event object for more detailed control.

What are Events?

An event is something that happens in the browser. Some events are triggered by the user (like a click), while others happen automatically (like a page finishing its load). In jQuery, event handlers are functions that run when a specific event occurs on a specific element.

$(selector).eventName(function() {
  // Code to run when the event happens
});

Common Mouse Events

click()

Runs when a user clicks on an element.

$("#alertBtn").click(function() {
  alert("Button was clicked!");
});

dblclick()

Runs when a user double-clicks on an element.

$("p").dblclick(function() {
  $(this).hide();
});

Here, $(this) refers to the specific paragraph that was double-clicked, not all paragraphs.

hover()

A shortcut that combines mouseenter and mouseleave into one method. Two functions are passed — the first runs on enter, the second on leave.

$("#box").hover(
  function() {
    $(this).css("background-color", "yellow");
  },
  function() {
    $(this).css("background-color", "white");
  }
);

Keyboard Events

Keyboard events fire when the user interacts with the keyboard, typically inside an input field.

• keydown — fires when a key is pressed down
• keyup — fires when a key is released

$("#searchBox").keyup(function() {
  var input = $(this).val();
  $("#preview").text("Typing: " + input);
});

Every time a key is released inside the search box, the typed text is shown in the element with id preview.

Form Events

submit()

Fires when a form is submitted. Often used to validate form data before sending it to a server.

$("form").submit(function(event) {
  event.preventDefault();  // Stops the form from actually submitting
  alert("Form submission intercepted!");
});

change()

Fires when the value of an input, select, or textarea changes.

$("select#color").change(function() {
  var chosen = $(this).val();
  alert("You selected: " + chosen);
});

focus() and blur()

focus fires when an input gets focus; blur fires when the user leaves the field.

$("#username").focus(function() {
  $(this).css("background-color", "#fffde7");
});

$("#username").blur(function() {
  $(this).css("background-color", "white");
});

The on() Method

The on() method is the most flexible and recommended way to attach events in jQuery. It can handle one or multiple events and also works for dynamically added elements.

Attaching a Single Event

$("#myBtn").on("click", function() {
  $("#result").text("Clicked!");
});

Attaching Multiple Events at Once

$("#inputField").on({
  focus: function() {
    $(this).css("border", "2px solid blue");
  },
  blur: function() {
    $(this).css("border", "1px solid gray");
  }
});

Event Delegation with on()

Event delegation is used when working with elements added to the page dynamically. Instead of attaching the event to the element directly, it is attached to a stable parent.

// Works even for <li> elements added after page load
$("#fruitList").on("click", "li", function() {
  alert("You clicked: " + $(this).text());
});

The Event Object

When an event fires, jQuery automatically passes an event object to the handler function. This object contains useful information about the event.

$("body").click(function(event) {
  console.log("Clicked at X: " + event.pageX + ", Y: " + event.pageY);
  console.log("Target element: " + event.target.tagName);
});

Common Event Object Properties

• event.target — The element that triggered the event
• event.pageX / event.pageY — Mouse position at the time of the event
• event.type — The type of event (e.g., "click", "keyup")
• event.preventDefault() — Stops the browser's default action
• event.stopPropagation() — Prevents the event from bubbling up to parent elements

Removing Event Handlers with off()

The off() method removes event handlers that were previously attached.

$("#myBtn").off("click");    // Removes the click handler from #myBtn

Key Points

• jQuery event methods like click(), hover(), and keyup() attach behavior to HTML elements.
• The on() method is the most flexible and modern way to handle events.
• $(this) inside an event handler refers to the element that triggered the event.
• Use event.preventDefault() to stop the browser's default behavior.
• Event delegation via on() is the correct way to handle events on dynamically added elements.
• Use off() to detach event handlers when they are no longer needed.