Self-Taught Developer Journal, Day 38: TOP DOM Manipulations and Events cont.

Today....

Exercises

1. an h3 with blue text that says “I’m a blue h3!”
2. a div with a black border and pink background color with the following elements inside of it:
   • another h1 that says “I’m in a div”
   • a p that says “ME TOO!”
     • Hint for this one: after creating the div with createElement, append the h1 and p to it before adding it to the container.

Events

Events are actions that occur on the web page like a mouse click or a key press. With JavaScript, we can listen to the events on the web page and react to them.

The three primary methods are:

1. Attach functions’ attributes directly on your HTML elements
   

2. Set the “on_event_” property on the DOM object in your JavaScript
   

3. Attach event listeners to the nodes in your JavaScript
   

Examples taken from The Odin Project

Method 3, Attach event listeners to the nodes in your JavaScript, is the preferred method. It maintains separation of concerns and multiple event listeners can be added.

Resources

The Odin Project