Events

Events occur when the page loads, a button is click, a form is submitted, etc. In short, they allow code to be executed when the user or browser performs or completes an action. Here’s a short list of common events and when they are triggered.

Event	Trigger
`change`	When an input, textarea, or select element’s data changes.
`click`	When an element is clicked. Usually reserved for buttons.
`keydown`	When a key on the keyboard is pressed.
`load`	When an element like a picture loads.
`submit`	When form data is submitted.

Window Events

Events can be triggered by the window. onload, onkeydown, onscroll are common events.

Example 1: Two Ways to Add an Event

Here are two ways that you could assign a function to the onload event of the window. The code below will trigger an alert when the page is loaded.

window.onload = function (event) {
  window.alert("The page loaded.")
}

// This code is equivalent to the code above.
// This is the way we will add events in this tutorial.
window.addEventListener("load", function (event) {
  window.alert("The page loaded.")
})

Example 2: Play an audio clip that says “E” when the user types an “E”

window.addEventListener("keydown", function (event) {
  // The event object contains information related to the user's action
  if (event.key === "e") {
    const synth = window.speechSynthesis
    const e = new SpeechSynthesisUtterance("E")
    e.voice = synth.getVoices()[0]
    synth.speak(e)
  }
})

Try pressing “e” on the keyboard and see what happens! (sound on)

If you’re interested in how the Web Speech API used above works, check here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API.

Element Events

You can detect when a specific element is having an action done to it. Here are some examples.

Example 1: Add a CSS class to an image when it loads

Given that a CSS class .fade-in will perform a fade animation on an element, fade the image in when the source loads.

<img
  src="https://www.w3schools.com/html/img_girl.jpg"
  width="300"
  height="300"
/>
<script>
  const img = document.querySelector("img")
  img.addEventListener("load", function (event) {
    img.classList.add("fade-in")
  })
</script>

Result

HTML

<img
  src="https://www.w3schools.com/html/img_girl.jpg"
  width="300"
  height="300"
  class="fade-in"
/>

Rendered Content

Example 2: Have a button that triggers an alert on click

<button id="alert">Alert!</button>
<script>
  const button = document.querySelector("#alert")
  button.addEventListener("click", function (event) {
    window.alert("Button!")
  })
</script>

Result

Rendered Content

Resources - Big ‘ol list of events

Practice Task: HTML Toggle Button

Make a toggle button that shows and hides HTML content. This is a common functionality needed for mobile navigation drawers, modals (popups), and collapsible accordions. See an example here: https://drawerexample.buckldav.repl.co/.

The button should handle both actions with a single on click event listener. (5 pts)
- Hint: you will likely need an if/else statement in your listener function.
The HTML content should show if it’s hidden and hide if its shown. (5 pts)