Learn
DOM Events with JavaScript
What is an Event?

When you refresh your email inbox, double tap on a post, or scroll through a newsfeed — something cool happens in your browser. These actions are known as events!

Events on the web are user interactions and browser manipulations that you can program to trigger functionality. Some other examples of events are:

  • A mouse clicking on a button
  • Webpage files loading in the browser
  • A user swiping right on an image

When a user does any of the above actions, they’re causing the event to be fired or be triggered. As in, “a click event fired when the button was clicked”. Being able to respond to these events makes your website interactive and therefore dynamic.

Instructions

Check out the recipe webpage — interact with the page and see how it responds. What events do you think are firing?

You’ll learn more about each event as you progress in the lesson, but here’s a quick overview:

  1. Click the + button to increase the measurements of the ingredients.
  2. Hover over the instructions to see the estimated cook time.
  3. Click on highlighted ingredients in the instructions for facts about the foods in the ingredient list.
  4. Click the bar at the bottom (footer) to change its background color.
Folder Icon

Sign up to start coding

Already have an account?