Log in from a computer to take this course

You'll need to log in from a computer to start Learn jQuery. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store
Learn

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.

Sign up to start coding

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?