In this lesson, we'll learn all about DOM events and how we can use them. We'll also learn about callback functions and the power we can wield by using them.

• Fork and Clone
• Open this folder in VsCode

After this lesson, students will be able to:

1. Describe what a browser event is
2. Create a click event
3. Use a named, referenced function as the click handler for the listener

Every kind of interactivity in the browser is an event: clicks, mouseovers, key presses, scrolling, resizing, loading the page, and more.

When you interact with the browser it checks to see if there is a listener for that interaction.

If there is a listener present, the browser will try to run any handlers for those interactions.

A handler is just a function that runs a desired procedure.

How can we set up a click event?

We need:

1. An element to set it on
2. A listener that listens for the event: on which element should the event take place
3. A handler that runs the procedure we want to have happen when the event is triggered

Make a button in the html:

<button id="btn">Click me</button>

Grab the button in the JS (DOM element):

const btn = document.getElementById('btn')
console.log(btn)

Set an event listener:

Use addEventListener() .addEventListener() documentation

btn.addEventListener('click')

The event listener takes a string as an argument. There are just a few strings that it will recognize as valid events, and 'click' is one of them.

List of events

Add a function that runs what we want to have happen. This function is what handles the event and is called an event handler:

btn.addEventListener('click', () => {
  console.log('Element clicked through function!')
})

Notice that we have supplied a function as an argument. The jargon for using a function as an argument to another function is callback.

Pseudocode for an event listener

elem.on(STRING, CALLBACK)

btn.addEventListener('click', () => {
  document.body.append('It seems as if it has been clicked!')
})

The handler that we used for our click was anonymous. It was a function that had no name. We just told the listener to run an anonymous function. We can give our function a name and thereby reuse that function with other event listeners.

We can abstract the anonymous function out and give it a name:

Separate function, not inside the listener:

const addText = () => {
  document.body.append('It seems as if it has been clicked!')
}

We can then reference it in the event Listener:

btn.addEventListener('click', addText)

With a named function, we can use the same handler for more than one DOM element.

Note that we do not invoke the function with parentheses. We do not want to invoke the function right away, we merely want to reference it to be invoked when the listener runs it.

• The function should be defined before it is used in the event listener
• When the function is invoked inside the event listener leave out the parentheses. We do not want to invoke the function right away! We merely want to reference that function in the listener.

Here the function is invoked and will run immediately:

btn.addEventListener('click', addText())

We don't want this! We only want the function to run when the user has clicked on the button.

Complete code:

const btn = document.getElementById('btn')

const addText = () => {
  document.body.append('It seems as if it has been clicked!')
}

btn.addEventListener('click', addText)

Let's do something fancier, and toggle the background-color of the page using .toggleClass()

const changeClass = () => {
  document.body.classList.toggle('black')
}

btn.addEventListener('click', changeClass)

CSS:

.black {
  background-color: black;
}

In this lesson, we learned all about event listeners and handlers and how we can leverage them. We also learned about the all-important callback function and hwo to use it.

• Build a Drum Kit in Vanilla JS
• Event reference
• Introduction to events
• Eloquent JavaScript: Handling Events
• Philip Roberts: What the heck is the event loop anyway?