JavaScript Events

What is a JavaScript Event?

JavaScript has the ability to listen and react to what is happening in the browser. Events are essentially "things" that happen on the page.. Things that JavaScript then reacts to. When you say, click the button to like this post, use your cursor to scroll down in order to see more text, write a comment, log into a page, all of these things happen because code has been written to "listen" to such a thing happen, so that the browser then responds appropriately.

There are all sorts of types of events that you can write code to listen for. Going over to the MDN documentation, there is a complete list.

Common Types of User Events

Mouse Events

These are things that happen when you interact with the DOM with a mouse or trackpad. This can happen with what are called click events, when you click, double-click, right-click, left-click, etc on a page. There is also mouseup, mousedown, mouseover, mouseout, etc.

Keypress

These are things that happen when you press down on the keyboard, we can listen for keyup, keydown, and keypress.

Form Events

Often you'll see form events consist of submitting a form in HTML. Say, when you sign up for a website and need to fill in information to register as a new user, the browser has been configured to listen to that submit event (the submit button typically), and then sends the information you've just filled in, to a server and does something with it. Other form events include change and input.

All of this is pretty interesting, but, what do we do with this information? How do you "listen" for all sorts of events to happen.

Enter event handlers.

Event Handlers

An event handler is a way to add an event listener onto the page. It's a function, that we pass in arguments to listen to our code.

In order to tell our code how to respond, we use a function called addEventListener(). This allows us to associate a specific event with a specific response.

addEventListener() takes two arguments. The 'event' we are listening to, say, a click, and then a callback function that will then execute that event.

A simple example with pseudocode would be:

element.addEventListener('click', function(/* do some stuff here when we click on the page */)

Trying out the example in real life, say we wanted to create an event when clicking on the header image of this article. The first piece of information we need to do that, is the class of that particular element. Right clicking inspect upon the image element, will reveal the information in the DOM.

The image has a class of "#main-title > div.crayons-article__cover > img")

Dropping into the dev tools JavaScript console, we need to first set the element we are adding an event to, to a variable.

const element = document.querySelector("#main-title > div.crayons-article__cover > img")

Then we need to add an event listener onto that particular element following the pseudocode example.

element.addEventListener('click', function(){
   alert("I was clicked!")
})

Trying that out in the console, when you click on the main image, you should see an alert window pop up, showing our message.

Congratulations, you've just created your first JavaScript event.

Additional Reading

Eloquent JavaScript has a very thorough and in depth explanation of this topic. You can read more here.

If you're at all confused about the difference between an event handler or listener, StackExchange has a good breakdown of what precisely happens on the page.

MDN, also has a very good breakdown, walking you through JavaScript events in much more detail. MDN