JavaScript and the Web — Keyboard, Mouse, and Touch Events
By: John Au-Yeung
Tags: Technology, Programming, Software Development, Web Development, JavaScript

Photo by Claudel Rheault on Unsplash

JavaScript is one of the most popular programming languages in the world. To use it effectively, we’ve to know about the basics of it.

In this article, we’ll look at how we can handle keyboard, mouse, and touch events in JavaScript.

Key Events

The keydown event is trigger when we press a key, keyup event when a key is released.

For instance, if we have the following HTML:

<p>

foo

</p>

We can write:

window.addEventListener("keydown", event => {

if (event.key === "g") {

document.body.style.background = "green";

}

});

window.addEventListener("keyup", event => {

if (event.key === "g") {

document.body.style.background = "";

}

});

Then when we press the G key, the background will turn green.

It’ll turn back to white when we release it.

The key property has the key that’s pressed.

The name of the key corresponds to what it is on the keyword.

keydown fires when the keypress and held. The event fires again every time the key repeats.

Modifier key presses by be checked by the shiftKey , ctrlKey , altKey , and metaKey properties.

Meta key is the Windows key on Windows keyboards and the Command key on Mac keyboards.

To check for key combinations, we can write:

window.addEventListener("keydown", event => {

if (event.key === "g" && event.altKey) {

document.body.style.background = "green";

}

});

window.addEventListener("keyup", event => {

if (event.key === "g" & event.altKey) {

document.body.style.background = "";

}

});

So the screen turns green when we press Alt and G at the same type.

It turns back to white when we release them.

When a user is typing text, we shouldn’t use the keyboard events to pick up what’s been typed.

This is because many people use input method editors that change the keyboard to type things other than the English language.

We’ll get those wrong if we get the inputted values from keyboard events.

Pointer Events

We can get mouse pointer-events to do mouse clicks.

In addition to mouse clicks, they also include touchpads, touchscreens, and trackball events.

Mouse Clicks

We can use the mousedown and mouseup events to get mouse events.

mousedown listeners run when a mouse button is clicked.

mouseup listeners run when a mouse button is released.

If 2 clicks happen close together, we can use the dblclick event to listen to it.

To get the position of where a mouse event happened, we can look at its clientX and clientY properties.

They contain the coordinates in pixels relative to the top-left corner of the window.

pageX and pageY are the coordinates relative to the top-left corner of the whole document, which may be different when the window has been scrolled.

For instance, we can write:

window.addEventListener("click", event => {

const div = document.createElement("div");

div.innerText = `(${event.pageX}, ${event.pageY})`

document.body.appendChild(div);

});

Then we we click the browser window, we’ll see the coordinates of the clicks listed on the screen.

Mouse Motion

We can listen to mouse motions with the mousemove event.

It can be used to track the position of the mouse.

For instance, we can write:

window.addEventListener("mousemove", event => {

document.body.innerText = `(${event.pageX}, ${event.pageY})`

});

Now when we move the mouse within the browser window, we get the position logged.

Touch Events

We can listen to touch events with mouse events. click corresponds to touches on the screen.

There are also additional touch-only events.

They include touchstart that’s fired when our finger starts touching the screen.

touchmove when we move while touching.

touchend is fired when we stop touching the screen.

Many touchscreens can detect multiple fingers at a time, so there are no set coordinates to the touches.

The event object has a touches property, which is an array-like object of points of the touch coordinates.

Scroll Events

A scroll event is fired whenever we scroll through a page.

For instance, if we have a page of stuff on a page created dynamically:

document.body.appendChild(document.createTextNode(

"foo

".repeat(1000))); window.addEventListener("scroll", () => {

const scrollHeight = document.body.scrollHeight;

console.log(scrollHeight);

});

Then when we scroll through the page, we’ll see the scroll height of the page.

There’s also an innerHeight global variable that gives us the height of the window.

Calling preventDefault on a scroll, the event doesn’t prevent the scrolling from happening.

The event handler is called only after scrolling takes place.

Conclusion

We can handle mouse clicks and scroll events within a page with JavaScript.

Also, touch events can also be handled.