notes.md

JavaScript Events

• What are JavaScript events?

  • a User is going to interact with your webpage
  • a Developer program the DOM to do ______

• Why are events important in modern web development?

  • Event allow us to execute code
  • User Experience (dynamic, interactive, cool)

• What are some of the different types of events we might want to respond to when working with code?

  • click
  • (mouse) hovers
  • load (DOMContentLoaded)
  • keyboard (keydown, keypress)
  • scroll
  • submit (forms)
  • timer?
  • drag and drop event
  • resize

Event-Driven DOM Manipulation

When [some event] happens, I want to manipulate the DOM [in some way]

Documentation

• addEventListener()
• event types
• event object

Practice

• For most of your Unit 5 work, you will not start with a blank HTML.
• Instead, you will code out an HTML file of what your initial DOM should look like and the use JavaScript Events to dynamically manipulate the DOM!

Coding Activities

1. Building a Dice-rolling app

   • When a click event happens, then I want the DOM to change the number inside by dice div

2. Building a Keyboard tracker

   • When a keydown event happens, then I want the DOM to show that letter that was pressed

3. Managing events for multiple elements