Listening for Keyboard Events
Inside the useEffect hook, we can register event listeners for keyboard events such as key down, key up.
We can listen for specific key combinations and trigger an action when the event occurs.
For example, If you press the “Tab” key the control will move to the next focusable element in your webpage.
Implementing Keyboard Shortcuts with useRef and useEffect
Keyboard shortcuts can help you to speed up your work as compared to using a mouse or Touch surface. With just a few key presses, you can perform tasks or actions that would otherwise demand multiple mouse movements and clicks. You can navigate through various User interfaces, switch between applications, or traverse through the documents using keyboard shortcuts. You should write your code in such a way that it supports keyboard shortcuts thus making your website more accessible.
Prerequisite:
Syntax:
target.addEventListener(eventName, callback [, options]);
- target: Specify the DOM element to which you want to bind an event listener.
- eventName: Specify the case-sensitive event name as a string to listen for, such as “click”, “scroll”, “keydown” etc.
- callback: Specify the function which will get executed when the event occurs.
- options (optional): Provide an optional object which specifies features about an event listener. The possible values are passive,capture,once and signal.
Contact Us