Interacting with the DOM Course (How To)

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.

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

• DOM Refresher

  2:25

• Event Bubbling and Delegation

  7:56

• Event Delegation

  1 objective

• DOM review

  3 questions

• Getting All Children of a Node with children

  6:58

• Traversing up the DOM with parentNode

  4:28

• Traversal Review

  3 questions