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 ofexample-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 anexample-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.
Take this course for free
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.