Learn
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.

Instructions

1.

Replace the ____ in the .on() method with click.

Run the code and click the login button.

Nice work, the login button now listens for a click event. The callback function in the event handler displays a login form when you click the button.

Folder Icon

Sign up to start coding

Already have an account?