DEV Community

Taulant Sulko
Taulant Sulko

Posted on


Understanding Events in Javascript

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>
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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

button.addEventListener("click", function(e) {console.log(e);});
Enter fullscreen mode Exit fullscreen mode

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.

Enter fullscreen mode Exit fullscreen mode

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);}
Enter fullscreen mode Exit fullscreen mode

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);}
Enter fullscreen mode Exit fullscreen mode

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);});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Hope you enjoyed the read. ✌️

Top comments (0)

Join us at DEV
Yes, this is technically an “ad”, but really we just want to ask if you want to join DEV. We have 900k+ developers reading, posting, and enjoying community, and would love to have you.   Create an account and continue your coding journey.