When dealing with keyboard event, I realise that not all element can get the event target. For example, when adding a handler to a element that does not has keyboard focus (the “p” element) like the followings, then, ofcourse nothing will happens when I press a keyboard.
However, if I change “p” element by the whole document to add that keyboard event (let’s say by changing my code to document.keydown = myFunction; ), then the code functions well. And as I read somewhere, this is because the keyboard event happened somewhere in document and then buble up to the document element. So could you tell me where this event happens in document?
Here is the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id = 'myId'>Some Text</p>
<script>
function myFunction(e)
{
var x=e.keyCode;
var keychar=String.fromCharCode(x);
alert("Key " + keychar + " was pressed down");
}
var myEl = document.getElementById('myId');
myEl.onkeydown = myFunction;
</script>
</body>
</html>
Thank you!
The fact that adding an onkeydown event handler to the document element works shouldn’t necessarily be taken as an indication that the event is bubbling up to the document element.
Essentially what that instruction is telling the browser is “while the user is viewing this page, respond to any keydown event with this function”.
If you had a text input within the document and typed into that input, your handler would still react in the same way, and then one could say that the event was bubbling up from that element through any containing elements all the way up to level of the document. But without such an element – i.e. one intended to react to key input events – your keydown event is occurring at the level of the document, not below.