Understanding Events in Javascript
Tags: javascript, html, beginners, webdev
Published: 2020-02-07 19:01:24

Been doing a Javascript refresher lately and I am finally getting a good understanding of what the `addEventListener()` method does. Most human interactions in Javascript are tracked by these Events. Understanding the Event Listener is key to designing interactions with JS.

# What are we listening to?

Let's say you want to listen to events on the button below. 

```html
<button id="button">Click Me</button>
```

# How are we selecting the element?

First you need to select the button in our javascript code. In this example below we are doing it with the `getELementById()` selector.

```javascript
var button = document.getELementById("button");
```

# How are we listening to the element?
Now that we have the button contained in a variable we can use the addEventListener method to start listening to those events. We want to know when it is was clicked. 

```javascript
button.addEventListener();
```

This won't return anything yet. It's missing 2 arguments.

```javascript
button.addEventListener("click", function(e) {console.log(e);});
```

This is the part that always seemed a bit unclear to me. What is `"click"`? What is function(e)? How do they relate to each other? 

Let's break it down.

```javascript
"click"
```

This is called the Event Type. This is probably the simplest one to understand. In this scenario we are waiting for a click to happen on the button element.

Other event types: onlclick, onmouseenter, onmouseleave, onmouseout, onmouseover etc.

# What happens when you "click"?

```javascript
function(e) {console.log(e);}
```

The `e` here just returns the event object and also takes the event object as an argument.

The `e` (event object) contains information about the "click" that just happened.

The `e` holds a lot of information that can help us understand what happened.

```javascript
function(e) {console.log(e.clientX, e.clientY);}
```

The code above will log the `X` and `Y` position of the mouse inside the browser when the click happened.

Here is a way to test this right away in your browser console. Copy & Paste the code below and start clicking on the browser screen.

```javascript
document.addEventListener("click", function(e) {console.log(e);});
```

# Event objects in the console.log

Here is a screenshot of the above line in the browser console. 

Notice how a unique event object is created for each time a `"click"` is registered.

![](https://pbs.twimg.com/media/EQMcTaoWoAA2Bba?format=png&name=small)

# Properties of a MouseEvent

As you can see there is a lot of hidden information in just one click. The `MouseEvent` object makes this information accessible.

```javascript
isTrusted: true
screenX: 390
screenY: 567
clientX: 368
clientY: 433
ctrlKey: false
shiftKey: false
altKey: false
metaKey: false
button: 0
buttons: 0
relatedTarget: null
pageX: 368
pageY: 433
x: 368
y: 433
offsetX: 361
offsetY: 308
movementX: 0
movementY: 0
fromElement: null
toElement: body
layerX: 368
layerY: 433
view: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
detail: 1
sourceCapabilities: InputDeviceCapabilities {firesTouchEvents: false}
which: 1
type: "click"
target: body
currentTarget: null
eventPhase: 0
bubbles: true
cancelable: true
defaultPrevented: false
composed: true
timeStamp: 8990.880000055768
srcElement: body
returnValue: true
cancelBubble: false
```

Hope you enjoyed the read. ✌️