Here a sample HTML, no framework used, just vanilla JavaScript. Notice that the first 2 divs have a tabindex, they can be focused by clicking on them or tab to them. Only active/focused elements can get key events. The events bubble up, so go from the div to the body, it will not trigger on the other divs. The 3rd div also has a keydown handler, but this div is not focusable and so it can never trigger the event. I hope that it is a bit clear on how key events work in the browser.
<!doctype html>
<html>
<head>
<title>Key Event Sample</title>
<style>
:focus { border: 1px solid blue;}
div { padding: 1em; margin: 1em; border: 1px solid black; }
</style>
<script>
function keydown(event) {
document.getElementById('info').textContent = 'Key ' + event.key + ' pressed on ' + event.target.textContent;
}
</script>
</head>
<body onkeydown="console.log('this will trigger on always')">
<div tabindex="0" onkeydown="keydown(event)">
Component 1
</div>
<div tabindex="0" onkeydown="keydown(event)">
Component 2
</div>
<div onkeydown="keydown(event)">
Component 3
</div>
<div id="info">Activate a component and press a key</div>
</body>
</html>