Notes on Day 10 of 30 Days of JavaScript

• notes • series • javascript • javascript30

The console dev tools in any browser is a developer’s bestfriend for doing quick DOM changes and debugging.

Table of Contents

Lessons Learned

<input />
<p></p>

const input = document.querySelector('input')

KeyboardEvent.shiftKey

A boolean value that indicates if the Shift</kbd> key was pressed (`true`) or not (`false`) when the event occurred.

input.addEventListener('keydown', (e) => console.log(e.shiftKey))

MouseEvent.shiftKey

A boolean value that indicates whether the Shift</kbd> key was pressed (`true`) or not (`false`) together with mouse events.

The code below logs true if we click the input while pressing down on the Shift</kbd> key simultaneously.

input.addEventListener('mousedown', (e) => console.log(e.shiftKey))

GlobalEventHandlers.onkeydown

This fires when the user presses a keyboard key. onkeypress and keypress are deprecated versions of this.

const logs = document.querySelector('p')

input.addEventListener('keydown', (e) => logs.textContent = e.code)

References

Twitter, LinkedIn