Interactivity and Event Handling

Handling user events—such as clicking elements—is a crucial part of adding interactivity to web pages. It helps us execute code when a user action takes place to make a page interactive. This can include many things from toggling the visibility of elements to more complex examples, such as sending email directly from a web page. In this lesson, we’ll take a look at how to integrate client-side JavaScript code into Astro components to add interactivity to elements.

Integrating scripts

To make Astro components interactive, we need to write JavaScript-related code between the script tags. Inside the script tags, we’re free to use imports, as well as TypeScript. By default, Astro will bundle and minify any JavaScript code found in components. It also ensures that if the component is used multiple times, the script will still be included only once.