Events & Event Listeners.

Events are how we respond to user interaction. We can listen for events and then run code when they happen. We can listen for events on any element on the page. We can listen for events like clicks, mouse movements, key presses, and more.

Overview#

We've been able to modify HTML and CSS using JavaScript using document. Awesome! We're going to go one step further and start involving the user. Web sites are meant to be reactive to users. In order to be reactive to them, we need to wait for them to do stuff, like click a button or type in an input. The way we do that is we wait for events to happen. An event is created every time certain events happens like when a user clicks something or when they type something. We respond to these events by having what are called event listeners. We give an event listener a function to run whenever an event happens. Let's take a look at responding to a click when a user clicks a button.

Adding an Event Listener#

We will be using this example of a button being clicked.

<button id="my-button">Click Me!</button>

const button = document.querySelector(".my-button");
button.addEventListener("click", function () {
  alert("Hey there!");
});

discuss what happens here...

Let's break it down.

• We grab the button via querySelector and store it in the JavaScript variable button.
• We then call the addEventListener method on the button. This takes two parameters (no need to memorize this, you can always look it up): the name of the event you want respond to, which in this case is the click event, and a function that is called whenever that event happens. This function is often called a callback because it gets called back whenever the event happens.
• We then call a function called alert. alert is a super, super annoying function that pops up a dialog window with whatever you call it with.
• People often get confused seeing }); on the last line. The first } is closing the function, the second ) is closing the function call of addEventListener, and the ; ends the statement.

Exercise#

Create an event listener that listens to a "keyup" event on the input field and shows what is typed in it beneath the input..

Event Delegation#

If you have a bunch of elements that you need to listen for events on, you could attach an event listener to each but that's a bit tedious to do. Instead what is sometimes easier to do is to use what's called event bubbling. When event fires on an element, after that "bubbles" up to its parent, and then its parent, and its parent, etc. until it's at the root element.

Let's take a look at an example of event bubbling.

<div class="button-container">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
  <button>5</button>
</div>

document
  .querySelector(".button-container")
  .addEventListener("click", function (event) {
    alert(`You clicked on button ${event.target.innerText}`);
  });

Okay nice 😁😁😁. Let's move on to Async, Await and Promises