Introduction

In this lesson we will look at:

  • event bubbling.
  • data attributes.
  • adding event handlers in a loop.
  • the mouseover and mouseout events.
  • the scroll event.

Event bubbling

Events “bubble up” through the DOM. This video explores what that means.

Code from the video.

Data attributes

Data attributes are a way to store information (or values) on DOM elements.

We will look at how to use them in the Scrimba in the next section.

Adding event handlers in a loop

This Scrimba looks at data attributes and adding click event handlers to a variable number of elements using a loop.

mouseover and mouseout events

The following Scrimba looks at the mouseover and mouseout events and then provides an example of using them together with data attributes.

Scrimba video

scroll event

Here we’ll look at the window.scroll event using a practical example.

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 branch of the repo.

Tags: