Keyboard Events

Es gibt drei Keyboard Events:

• keydown
• keypress
• keyup

keydown, keypress und keyup

keydown und keyup feuern, wenn eine non-character Taste gedrückt wird.
keydown, keypress und keyup feuern, wenn eine character Taste gedrückt wird.
Wird die Taste gedrückt gehalten, feuern keydown und, bei character keys, keypress, wiederholt. keyup feuert nur ein Mal beim Loslassen der Taste.

non-character keys

1. Escape
2. F1-F12 (Funktionstasten)
3. Backspace (Delete auf Mac)
4. Tab
5. Caps Lock
6. Enter
7. Modifier keys wie Shift, Strg (Control auf Mac?), Alt ( Command auf Mac), Windows/Start ( Option auf Mac)
8. Arrow Keys

character keys

• A-Z
• 0-9
• Satzzeichen wie ,, ., !, …

event.type

Mit event.type können wir prüfen, welche Art von Event abgefeuert wurde:

function logEventType(event) {
  console.log(`Event type: ${event.type}`);
};
document.addEventListener('keydown', logEventType);
document.addEventListener('keypress', logEventType);
document.addEventListener('keyup', logEventType);

Keydown oder keyup?

• keydown verwenden wir für Events beim Drücken einer Taste
• keyup verwenden wir für Events beim Loslassen einer Taste

In den meisten Fällen ist es egal, welches Event wir verwenden (Ja, ist das so? siehe Enter-Taste).

Keyboard Events bei fokussierten Elementen

Analog zu einem Klick auf einen Element können wir auch auf einen Tastendruck auf einem Element lauschen. Ein Button wird zuerst mit Tab angesteuert und erhält so den Fokus, wenn dann die Space oder Enter Taste gedrückt wird, wird ein Event abgefeuert, das wir abfragen können.

button.addEventListener('keydown', event => {
  console.log(event.type);
});

Avoid event delegation

Keyboard Events bubbeln nach oben, das ist nicht unbedingt erwünscht. Wenn der User auf ein Input Feld klickt und dann eine Taste betätigt, bubbelt ein Event durch input, form und document. Wenn der User in eine Komponente geklickt hat, die fokussierbare Elemente enthält (wie z.B. ein Formuar), aber nicht auf ein fokussierbares Element direkt (z.B. ein Input-Feld), kann es sein, dass kein Event ausgelöst wird. Dann ist nämlich body fokussiert und das Formular wird nicht vom EventListener erreicht.

const buttonKbd = document.querySelector('.eventTest');

buttonKbd.addEventListener('keydown', e => {
  e.stopImmediatePropagation();
  console.log(`From button: ${e.type}`);
});
document.addEventListener('keydown', e => {
  console.log(`From document: ${e.type}`);
});

Gedrückte Taste abfragen

Wenn wir wissen wollen, welche Taste gedrückt wurde, müssen wir zwischen zwei Möglichkeiten unterscheiden:

• event.key gibt uns die gedrückte Taste zurück und ist case sensitive
• (anders gesagt: event.key ist das, was wir am Monitor sehen (wollen))
• event.code gibt uns den Wert der physischen gedrückten Taste zurück

event.key gibt uns w oder, wenn Shift gedrückt wurde, W zurück
event.code gibt uns KeyW zurück, mit oder ohne Shift

Die physische gedrückte Taste kann sich von der gedrückten Taste unterscheiden, wenn die Tastaturbelegung geändert wurde. Beim normalen Keyboard drücke ich auf e und bekomme e zurück. Bei einer anderen Belegung drücke ich ebenfalls e, bekomme aber z.B. ein d zurück.

In den allermeisten Situationen verwenden wir key, wenn wir die physische Taste wissen wollen, verwenden wir code. Wenn die Tastaturbelegung nicht geändert wurde, stimmen die beiden Werte überein.

function logEventKey(event) {
  console.log(`Event key: ${event.key}`);
  console.log(`Event code: ${event.code}`);
};
document.addEventListener('keydown', logEventKey);
document.addEventListener('keypress', logEventKey);
document.addEventListener('keyup', logEventKey);

Modifier Keys

1. Shift
2. Strg (Control on Mac)
3. Windows/Start (Option/opt on Mac)
4. Alt (Command/cmd on Mac)

Wir können die Modifier Keys abfragen:

function logEventKey(event) {
  console.log(`Shift pressed: ${event.shiftKey}`);
  console.log(`Control pressed: ${event.ctrlKey}`);
  console.log(`Alt pressed: ${event.altKey}`);
  console.log(`Command pressed: ${event.metaKey}`);
};
document.addEventListener('keydown', logEventKey);
document.addEventListener('keypress', logEventKey);
document.addEventListener('keyup', logEventKey);

getModifierState

Wir können die Methode getModifierState() verwenden, um festzustellen, ob eine Modifikationstaste gedrückt wurde. getModifierState() akzeptiert ein Argument, und zwar einen String, der den modifier key repräsentiert Liste der gültigen Werte auf MDN

In der Praxis ist das nur dann nützlich, wenn man wissen möchte, ob die Feststelltaste aktiviert ist.

document.addEventListener('keydown', event => {
  const capsOn = getModifierState('CapsLock');
});

Left or right modifier keys

Wir können mit der location Eigenschaft abfragen, ob die linke oder die rechte Modifiertaste gedrückt wurde. Links ist 1, rechts ist 2:

document.addEventListener('keydown', event => {
  console.log(event.code, event.location);
});

event.repeat und event.keyCode

event.repeat sagt uns, wie oft eine Taste gedrückt wurde(?).
event.keyCode sollte nicht mehr verwendet werden, kommt aber in altem Code häufig noch vor:

function logEventKey(event) {
  console.log(`Event repeat: ${event.repeat}`);
  console.log(`Don't use: ${event.keyCode}`);
};
document.addEventListener('keydown', logEventKey);
document.addEventListener('keypress', logEventKey);
document.addEventListener('keyup', logEventKey);

Triggering a click on other elements

Wir können mit JavaScript ein click Event triggern, das ist nützlich, wenn wir eigene Komponenten erstellen (später mehr):

HTMLElement.click();