Code Editor
Web Browser
Mouse Events

Introduction to Mouse Events

The jQuery library provides a collection of methods that serve one of two purposes.

  • To listen for an event — an event (e.g. clicking a button) is something the user does to trigger an action.
  • To add a visual effect — a visual effect (e.g. a drop-down menu appearing when a user clicks a button) is something that changes the appearance of the web page. Events are often responsible for triggering a visual effect.

In this lesson, you will learn how to link a user event to a visual effect using event handlers.

There are two parts to an event handler: an event listener and a callback function.

  • An event listener is a method that listens for a specified event to occur, like a click event.
  • A callback function is a function that executes when something triggers the event listener.

Both the event listener and callback function make up an event handler.

In code, this looks like:

$('.example-class').on('click', () => { // Execute code here when .example-class is clicked });

Let's consider the example above step-by-step:

  • $('.example-class') selects all HTML elements with a class of example-class.
  • The on('click') method is the event listener. It checks if the user has clicked an .example-class HTML element.
  • The second argument to .on() is a callback function. When a 'click' occurs on an example-class element, this function executes.
Report a Bug
If you see a bug or any other issue with this page, please report it here.