Interacting with the DOM Course (How To)

About this Course

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener. We'll learn about different types of events and how we can use the relationships between elements to write more powerful code.

Syllabus

Responding to Events

Here we'll get to "teach" an element to behave a certain way when a user interacts with it. For example, we could have a form field turn red if a user enters invalid text. Or a menu could appear if a user clicks on the menu bar. Let's look at these and other behaviors we can set up on a web page.

Chevron 8 steps

What is an Event?

2:56
Functions as Parameters

3:57
Events and Functions as Parameters Review

4 questions
Listening for Events with addEventListener()

10:31
Adding an Event Listener

3 objectives
instruction
Common DOM Interaction Errors
The Event Object

4:16
Event Listening

3 questions

Traversing the DOM

You have your hands on one element, but you want to grab another one nearby. You could go all the way back out to the document and call to it from there, but chances are your node already has a reference to it. Let's learn how to get around in, or traverse, the DOM.

Chevron 7 steps