JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Listener</title>
</head>
<body>
<div tabindex=1></div>
</body>
</html>
CSS
/* This coloring is just for illustration, it is not important. */
div{
width: 100px;
height: 100px;
background-color: aqua;
}
JavaScript
document.addEventListener('keyup', function (event) {
if (event.key == "z" && event.altKey){
console.log("Alt + Z pressed in the document!")
}
})
var div = document.getElementsByTagName('div')[0];
div.addEventListener('keyup', function (event) {
if (event.key == "z" && event.altKey){
console.log("Alt + Z pressed in the div!")
}
})