What is the event interface and why is it important?

The event interface in JavaScript represents any event that takes place in the DOM. Events can be user-generated or generated by an API, and they can include anything from basic user interactions to something happening in the rendering model. To interact with the DOM and make your JavaScript react to events, you can add an event listener.

How to add an event listener

The most common way to respond to events is by adding an event listener. When you add an event listener, you tell it what event to listen for and give it a function to invoke when it detects that event has fired. The basic syntax for adding an event listener looks like this:

document.addEventListener('click', function() {
  // Logic inside function
});

In this example, we're adding a click event listener to the entire document, and we're passing in an anonymous function as the second argument. Inside this function, we can put any code we want to execute when the click event is detected.

How to handle events with a function

When you add an event listener, you give it a function to invoke when the event fires. This function is called the event handler, and it can be defined inline or as a separate function. Here's an example of an event handler defined inline:

document.addEventListener('click', function() {
  alert('Something was clicked!');
});

addEventListener

The event object and its properties

When an event is detected, the event handler function is automatically passed an event object as its first argument. This object contains properties and methods that are common to all events, such as the type of event that was detected and the element that fired the event. Here's an example of how to access the type property of the event object:

document.addEventListener('click', function(event) {
  console.log(event.type);
});

In this example, we're logging the type property of the event object to the console when a click event is detected.

The difference between adding an event listener and using the "on" attribute

You can also handle events by using the "on" attribute, which allows you to define a function that will be executed when an event fires. Here's an example:

<button onclick="handleClick()">Click me</button>

<script>
function handleClick() {
  alert('Button was clicked!');
}
</script>

In this example, we're using the "onclick" attribute to define the function that will be executed when the button is clicked. However, this method has a couple of drawbacks. First, you can only define one function per event. Second, it's harder to remove an event listener that was defined using the "on" attribute.

Multiple events and event types

You can add multiple event listeners to the same element, and you can also listen for multiple event types. Here's an example:

const button = document.querySelector('#myButton');

button.addEventListener('click', function() {
  console.log('Button was clicked!');
});

button.addEventListener('focus', function() {
  console.log('Button received focus!');
});

button.addEventListener('blur', function() {
  console.log('Button lost focus!');
});

In this example, we're adding three event listeners to the same button element. The first listener listens for the click event, while the second and third listeners listen for the focus and blur events, respectively. Each event listener has its own function that will be invoked when the corresponding event is detected.

Listening for Key Down and Key Up Events

keydown

keyup

document.addEventListener('keydown', (e) => {
  console.log(e.keyCode);
});

document.addEventListener('keyup', (e) => {
  console.log(e.keyCode);
});

keyCode

e

Checking the Unicode Value of a Key

keyCode

e

document.addEventListener('keydown', (e) => {
  console.log(e.keyCode);
});

You can look up the Unicode value of a key online, as there is no logical order to the key codes.

Using the Event API to Prevent the Default Behavior of an Event

preventDefault()

e

document.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) {
    e.preventDefault();
  }
});

This will prevent the default behavior of the spacebar key, which is to scroll the page.

Debouncing Events with setTimeout() and clearTimeout()

setTimeout()

clearTimeout()

let timer;

document.addEventListener('keyup', (e) => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    console.log('debounced event');
  }, 1000);
});

keyup

Listening for the DOMContentLoaded Event and the Load Event

DOMContentLoaded

load

addEventListener()

document.addEventListener('DOMContentLoaded', (e) => {
  console.log('DOM content loaded');
});

window.addEventListener('load', (e) => {
  console.log('page loaded');
});

DOMContentLoaded

load