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
