JavaScript Event Listeners for Beginners
Tags: javascript, beginners, webdev
Published: 2021-01-26 14:33:12

# What Are Events and Listeners?

Visitors to our websites, and users of our applications, are continuously interacting with elements of the Document Object Module (DOM), whether they realise it or not. 

When these interactions occur, the elements themselves emit **event actions**. As JavaScript developers, we're able to listen for these events using the JavaScript method for **event listeners** and then handle them with appropriate and well-timed responses. Assuming that's our our aim, and it certainly should be.

## Why Should We Listen for Element Events?
Responding to user activity can greatly **enhance user experience** and interactivity leading to **improved engagement**.

### What are Events Exactly?
Events vary according to element type, most are obvious but some not so. They include, for example; 

  * **Mouse** events:- such as mouseover, mousedown, mouseup and click; 
  * **Keyboard** events:- such as keydown and keyup; 
  * **Form** events:- such as focus and submit; 
  * **Window** events:- such as scroll and resize; 
  * _to name but a few_. 

### A detailed explanation to writing your first simple event listener:

#### Step 1 - Target the element and declare a new variable.
The very first step in preparing our code for listening and handling events, is to declare a variable for the element that will be emitting the event we're interested in. In the following simple example, that element is a button with the class `click-me`. 

We'll declare a variable with an intuitive name; `clickMe` and use the button's class of `click-me` to select the element from within the document, using the JavaScript method `.querySelector()`: 

```
const clickMe = document.querySelector('.click-me');
```
#### 2. Call the `click-me` variable that we've just declared for the button: 
```
click-me
```
#### 3. Next, we attach to that variable, the JavaScript method for event listening `.addEventListener()`. 
```
click-me.addEventListener();
```
The event listener takes in two parameters, comma-separated, inside the parenthesis:
  1. - The first is the emit event which sets up the listener. In this example we'll listen for a **click** event. 
  2. - The second, a function that will be called to action when the specified event occurs. This function is known as a **callback function** and in this example, it has no name and so, is anonymous.

#### 4. Add the event Parameters
Our Parameters in this case are `click`, and an empty function `function()`.
```
click-me.addEventListener('click', function());
```
#### 5. Add a code block:
Next We'll open up a code block `{ }` which will contain the code for the action we wish to take place in **response** to the event:
```
click-me.addEventListener('click', function() {  });
```
#### 6. Add a callback response
Inside the code block, we'll simply output an appropriate message to the console using `console.log();` 

```
clickMe.addEventListener('click', function() {
  console.log(`the button with class 'click-me' button was clicked`);
});
```
Our event listener is now complete with response and feedback.

This simple event listener will execute a log to the console every time the button is clicked. It will also work if the user focuses the button using tab, and presses the enter key.

## A simple way to remember event listeners
If all of this seems too much to remember at first, a simple way to remember the role and key ingredients of an event listener is this:
 
1. **Get** `click-me` button
2. **Listen** `click` event
3. **Do** `console.log`

Hopefully, this will help you along your own path towards JavaScript mastery.