Executing Actions
Upon detection of the keyboard event related to the keyboard shortcut,we can execute the actions.
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