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.

<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.

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.

button.addEventListener();

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

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.

"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"?

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.

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.

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.

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.

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. ✌️