
Get the current position of the mouse from a JavaScript event
24/05/2020Lets look at how to get the current clientX and clientY position of the mouse pointer from a JavaScript 'mousemove' event.
I used to just make websites and it made me completely ignorant to the importance of listening to keypress events in JavaScript. In truth, I didn’t ever have the need to handle multiple keypresses. Now that I have moved into app, gui and game development getting the keypresses right has become a lot more important.
The first thing I would like to say on the subject is not to use the ‘keypress’ event. This feature has been deprecated and gives you less control. I personally use ‘keydown’ and ‘keyup’ events instead.
A ‘keydown’ event listener looks like this:
document.addEventListener('keydown', (event) => {
// do something
});
When we use a ‘keydown’ event we are listening for the moment when a key is pressed. We can similarly react when a key is released using the ‘keyup’ event.
document.addEventListener('keyup', (event) => {
// do something
});
The above example is attached to the document. It is important to understand that where we attach the listener changes the behaviour. By attaching it to a more specific element we can localise key events and behaviours to when the element contains focus-within.
<div id="box">
<input type="text">
</div>
<script>
document.getElementById('input').addEventListener('keydown', (event) => {
alert('inside box');
});
</script>
Notice that within the above example our ‘keydown’ event doesn’t fire when our focus is within the document, but does when we are in the input.
At the moment our ‘do something’ code will fire on every key press. More commonly it is likely that we want to tie the ‘do something’ to a specific key press. This is why it is important to make the ‘event’ object available within our function. From within the ‘event’ object we can use ‘event.key’ to identify the specific key value that was pressed.
document.addEventListener('keyup', (event) => {
if (event.key == 'ArrowUp') {
// do something
}
});
It is worth noting that when using ‘event.key’ we get the value of the key pressed. This means that when using a shift modifier the returned alphabetical character will be uppercase, or any modified character such as an @ symbol.
So what happens when we want to listen to 2 keys being pressed at the same time? Having a modifier key is quite a common scenario and used for the vast majority of keyboard shortcuts in applications.
The answer is to add an object to catch the key presses.
let keysPressed = {};
document.addEventListener('keydown', (event) => {
keysPressed[event.key] = true;
});
When a key is pressed we add the value as the object key and set it to true. We now have a flag to tell us when certain key values are active. Next we make sure that we clear the key values when ‘keyup’ is triggered.
document.addEventListener('keyup', (event) => {
delete this.keysPressed[event.key];
});
Finally we can check for multiple keys with simple statements.
document.addEventListener('keydown', (event) => {
keysPressed[event.key] = true;
if (keysPressed['Control'] && event.key == 'a') {
alert(event.key);
}
});
document.addEventListener('keyup', (event) => {
delete keysPressed[event.key];
});
Lets look at how to get the current clientX and clientY position of the mouse pointer from a JavaScript 'mousemove' event.
Find out whether a JavaScript array contains single or multiple values by passing an array of values to includes() with the help of some() and every().
Would you like to match the closest number in an array using JavaScript? Find out how to achieve this using both reduce() and sort().
What are web components? Learn about web components, the shadow DOM, styling and lifecycle callbacks in this JavaScript tutorial series.
Learn how to use event listeners to detect and handle single and multiple keypress events in JavaScript. Add modifier keys to your application!
Using Bulma but don't know how to integrate it with Nuxt? I'll show you how to load Bulma into your Nuxt project with full control over variables.
sasas
Fair enough, i agree.
ert
hmmmm…………
YO THIS STUFF IS AWESOME !!
Brilliant!
.
U have made my day.