Events in JavaScript

Slava Pashaliuk
Nov 4 · 4 min read

Introduction

Let’s start with the definition of front-end development. It is the practice of giving data a new life, converting plane data into an engaging and beautiful website, where JavaScript is responsible for “engaging” part and beautifying felt on the shoulders of CSS.

What is an Event?

To make a user’s experience more engaging, JavaScript has “events”, which are just a way for JavaScript to interact with HTML . Basically, with JavaScript we can track all of the changes that happens to a page’s state.

First, it’s important to know that events are a part of the DOM(Document Object Model) and every HTML element contains a set of events which can trigger JavaScript Code.

Some more obvious examples of events are: page loads, button clicks, when users copy something to their clipboard, even resizing a window can invoke some JavaScript code.

Invoked JavaScript code, at the same time, will have an assigned action to run when one of these events is happening, like buttons closing windows or sending “GET” requests to get more information from the server on mouse scroll.

What Can javascript Do?

In this part of my blog post I’ll show a few examples of events in JavaScript and how they work:

1. Click event

When was the last time you clicked on a button or somewhere else on the web-page? Most likely the answer would be just now or few minutes ago. Click, without a doubt, is the most popular event on modern web-sites, which is why I decided to start with it.

const button = document.getElementById("button") // here we find a button which we want to "listen to"button.addEventListener("click", clickHandler) // here we add an event listener to the button and assign a callback functionfunction clickHandler(e) { // in a callback function we simply assign a task that should be executed on the press of that buttonwindow.alert("The button was clicked!")// in our case it's an alert message that pops up every time the button is pressed}//As you can see this event is tied to a button, that was created in HTML with the following code:
<button id="button">Tracked Button</button>

2. Keydown event

Keydown event is simply an event of pressing the key. This event has siblings which are keypress(fires after keydown, when a key on the keyboard is pressed) and keyup(fires when a key on the keyboard is released). I am not sure if there is a reason to betray keydown and choose it’s siblings instead, but many articles on the Web say that “keydown” should be your go to and there is no need for the other two.

document.addEventListener("keydown", function(e) { // notice that we are listening to the whole document here, not particular elementif (event.keyCode === 70) { // we can track any button by itself window.alert("Learn. Love. Code.") // https://keycode.info is a great resource to find keyCodes fast}else{ //or just listen for the press of any buttonwindow.alert("Key down!")}})

3. Clipboard copy event

The last event I want to show is probably not the most popular and useful. However, if your site is not some kind of highly confidential site and you want to keep track of everything that was copied from it, you can “listen” to what user copies to their clipboard and do something with this data.

document.addEventListener('copy', function (e) { // again we are listening to the whole document here, not particular elementconst selection = document.getSelection() // text that we copiede.clipboardData.setData('text/plain', selection.toString()) // here we set the data in our clipboard to whatever user selectedwindow.alert(`Yay!Copied!\n ${selection.toString()}`)})

Remember that there are much more events to “listen” to. If you are interested in that you can find out more events that can be listened here or here .

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade