Keyboard Events - Keydown/Keyup

UI Events: Keyboard Events

---

---

What is a keyboard event in JavaScript?

View Answer:

Interview Response: A keyboard event is triggered when a user interacts with the keyboard, such as pressing, holding, or releasing a key.

Code Example:

document.addEventListener('keydown', function(event) {
  console.log(event.keyCode);
});

---

What are the three main types of keyboard events?

View Answer:

Interview Response: The three main types are 'keydown', 'keypress', and 'keyup'.

Code Example:

// keydown event
document.addEventListener('keydown', function(event) {
  // Get the key that was pressed
  var key = event.keyCode;

  // Do something with the key
  if (key == 65) {
    // The A key was pressed
  }
});

// keypress event
document.addEventListener('keypress', function(event) {
  // Get the key that was pressed
  var key = event.keyCode;
  var character = event.key;

  // Do something with the key
  if (character == 'a') {
    // The letter a was pressed
  }
});

// keyup event
document.addEventListener('keyup', function(event) {
  // Get the key that was released
  var key = event.keyCode;

  // Do something with the key
  if (key == 65) {
    // The A key was released
  }
}); 

These are just a few examples of how to use keydown , keypress , and keyup events in JavaScript. There are many other things that you can do with these events, so be creative and experiment!

---

How does 'keydown' event differ from 'keyup'?

View Answer:

Interview Response: The 'keydown' event is triggered when a key is pressed down, while 'keyup' is triggered when a key is released.

Code Example:

document.onkeydown = function(event) {
    console.log('Key pressed:', event.key);
}

document.onkeyup = function(event) {
    console.log('Key released:', event.key);
}

---

What is the purpose of 'event.keyCode' in keyboard events?

View Answer:

Interview Response: The 'event.keyCode' is a property that returns the Unicode number of the key that triggered the keyboard event.

---

Deprecated

It should be noted that event.keyCode is deprecated and should no longer be used, but you may come across in older code.

---

How does the 'keypress' event differ from 'keydown' and 'keyup'?

View Answer:

Interview Response: The 'keypress' event is fired when an actual character is being inserted. In contrast, 'keydown' and 'keyup' are fired when any key is pressed or released, including non-printable keys like Shift or Ctrl.

Code Example:

document.onkeydown = function(event) {
    console.log('Key down:', event.key);
}

document.onkeypress = function(event) {
    console.log('Key press:', event.key);
}

document.onkeyup = function(event) {
    console.log('Key up:', event.key);
}

---

Why has 'event.keyCode' been deprecated?

View Answer:

Interview Response: The 'event.keyCode' property has been deprecated due to inconsistencies across different keyboard layouts and locales. The 'event.key' and 'event.code' properties offer more reliable alternatives.

---

What is the purpose of 'event.preventDefault()' in keyboard events?

View Answer:

Interview Response: The 'event.preventDefault()' method stops the default action of an element from happening. For example, it can prevent a form from submitting.

---

Can you capture a keyboard event on any HTML element?

View Answer:

Interview Response: Not all, there are some limitations. Keyboard events are generally captured on elements that can gain focus like input, textarea, or any element with 'contentEditable' attribute.

Technical Details: Most keyboard events are generally targeted at the element that has focus. But for elements that don't usually get focus, like a div or span, you can make them focusable by adding the tabindex attribute. However, you can also set a global event listener on the window or document object, which will capture keyboard events regardless of the focused element.

Code Example:

// Global event listener on the document
document.onkeydown = function(event) {
    console.log('Key down:', event.key);
}

// Making a <div> focusable and capturing an event
let div = document.getElementById('myDiv');
div.setAttribute('tabindex', '0');
div.onkeydown = function(event) {
    console.log('Key down in div:', event.key);
}

---

What is the use of 'event.repeat' property in keyboard events?

View Answer:

Interview Response: The `event.repeat` property in keyboard events is a boolean that is `true` if the key is being held down long enough to auto-repeat, and `false` otherwise.

Code Example:

document.onkeydown = function(event) {
    if (event.repeat) {
        console.log('Key down (repeating):', event.key);
    } else {
        console.log('Key down:', event.key);
    }
}

In this example, when a key is held down and starts repeating, the 'keydown' event logs a message indicating that the key is repeating. If the key is just pressed once and not held down, it logs a normal 'Key down' message.

---

What are modifier keys in keyboard events?

View Answer:

Interview Response: Modifier keys in keyboard events refer to keys like Shift, Ctrl, Alt, and the Command key, which modify the behavior of other keys when they are pressed in combination with them.

---

How can you check if a modifier key was pressed during a keyboard event?

View Answer:

Interview Response: You can check if a modifier key was pressed during a keyboard event by examining the properties of the event object, such as `event.shiftKey`, `event.ctrlKey`, `event.altKey`, and `event.metaKey`.

Code Example:

document.onkeydown = function(event) {
    if (event.shiftKey) {
        console.log('Shift key was pressed');
    }

    if (event.ctrlKey) {
        console.log('Ctrl key was pressed');
    }

    if (event.altKey) {
        console.log('Alt key was pressed');
    }

    if (event.metaKey) {
        console.log('Meta key (e.g., Command key on macOS) was pressed');
    }
}

In this example, the event object's properties are checked to determine if the Shift, Ctrl, Alt, or Meta (Command) key was pressed during the 'keydown' event. The corresponding message is logged to the console accordingly.

---

What is a 'hotkey'?

View Answer:

Interview Response: A 'hotkey' refers to a combination of keystrokes that triggers a specific action or functionality in an application. This can be reproduced using JavaScript events.

Code Example:

document.onkeydown = function(event) {
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault(); // Prevent the default browser save action
        console.log('Save action triggered');
    }

    if (event.altKey && event.key === 'F4') {
        event.preventDefault(); // Prevent the default browser close action
        console.log('Application close action triggered');
    }
}

In this example, if the user presses Ctrl+S, the 'Save action triggered' message is logged to the console. Similarly, if the user presses Alt+F4, the 'Application close action triggered' message is logged. The event.ctrlKey and event.altKey properties are used to check if the respective modifier keys are pressed, and event.key is used to check the specific key that was pressed.

---

Can you stop a keyboard event from propagating?

View Answer:

Interview Response: Yes, you can stop a keyboard event from propagating (bubbling up the DOM tree) by calling `event.stopPropagation()` or prevent its default behavior using `event.preventDefault()`.

---

What is the order of execution for 'keydown', 'keypress', and 'keyup' events?

View Answer:

Interview Response: The order of execution for keyboard events is 'keydown', 'keypress', and then 'keyup' events.

---

When should you use keyboard events during user interaction?

View Answer:

Interview Response: When we wish to manage keyboard operations, we should utilize keyboard events (virtual keyboard also counts). For example, when there is a response to arrow keys Up and Down or hotkeys (including combinations of keys).

---

What do the event.code and event.key properties do?

View Answer:

Interview Response: The 'event.key' property returns the value of the key pressed, while 'event.code' gives the physical key's code, regardless of the keyboard layout or language.

Technical Response: The key property (event.key) of the event object allows us to extract the character, while the code property (event.code) of the event object allows us to extract the “physical key code”.
For example, the same key Z can be suppressed with or without Shift. This behavior results in two distinct characters: lowercase z and uppercase Z.

Key	event.key	event.code
Z	z (lowercase)	KeyZ
Shift+Z	Z (uppercase)	KeyZ

---

Is case sensitivity and the correct formatting crucial when dealing with 'event.code' in JavaScript? If so, how should it be formatted?

View Answer:

Interview Response: Yes, the case is critical, and all event codes must utilize the Pascal case to obtain the correct return value; otherwise, they fail. Please avoid misspellings: it is KeyZ, not keyZ. The check-like event.code=="keyZ" won't function since the initial letter of "Key" needs capitalization.

Code Example:

document.onkeydown = function(event) {
    if (event.code === 'KeyA') {
        console.log('Key A pressed');
    }
}

In this example, the event.code is compared to the string 'KeyA', using uppercase letters as specified by the standard format. This ensures accurate detection of the specific key.

---

What happens when a key does not have a letter-based character?

View Answer:

Interview Response: For keys without letter-based characters, 'event.code' provides a descriptive string like 'Space', 'Enter', or 'ArrowRight', representing the physical key pressed.

Technical Response: Shift, F1, and other special keys. Event.key is roughly equivalent to event.code for such keys. Please keep in mind that event.code defines which key gets pushed. For example, most keyboards include two Shift keys: one on the left and one on the right. The event.code informs us which one was pushed, whereas the event.key determines the "meaning" of the key: what it is (a "Shift").

Example:

Key	event.key	event.code
F1	F1	F1
Backspace	Backspace	Backspace
Shift	Shift	ShiftRight or ShiftLeft

---

What happens when we suppress a key for more than a second?

View Answer:

Interview Response: If we suppress a key over an extended period of time, it begins to "auto-repeat": the keydown triggers repeatedly, and when the key is released, we eventually receive keyup. As a result, having numerous keydowns and a single keyup is rather usual. The event object's event.repeat attribute equates to true for events triggered by auto-repeat.

---

Can you prevent the default actions on OS-based special keys using the preventDefault method?

View Answer:

Interview Response: No, except for OS-based special keys, preventing the default action on keydown cancels most of them. On Windows, for example, Alt+F4 dismisses the current browser window. And there is no way to halt it by disabling JavaScript's default action. Any activity outside of the browser's scope, such as shutting the browser window, is not captured by the browser, classifying it as an OS-level event.

---