Introduction

In this lesson we will look at:

  • what DOM events are.
  • the click event.
  • the remainder operator.
  • the onchange event.

Introduction to Events

When something happens in the browser - such as a page loading, a form being submitted or a user clicking a button, the DOM sends an Event.

We can write code to respond to that event.

Some examples of events include:

  • click - when the mouse button is clicked
  • keydown - when any key is pressed
  • keyup - when any key is released
  • mouseover - when the mouse cursor moves over a DOM element or its children elements
  • mouseout - when the mouse cursor moves off an element
  • submit - when a form is submitted

You can find a full list of events here.

An event is an object with properties.

The video below is an introduction to DOM events and the click event in particular.

Code from the video.

The remainder operator

The remainder operator %, sometimes referred to as the modulus operator, returns the remaining integer value after dividing two integers:

const remainder = 5 % 2;
// remainder will equal 1

Scrimba video

The onchange event

The following video looks at the onchange event of a select element and how to create HTML inside that event function.

Code from the video.

Example with setTimeout

In the next a video, a setTimeout function is used to mimic a loading state when creating the HTML.

Code from the video.

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt to answer the questions before checking them against the answers in the answers branch of the repo.

Tags: