keyboard event target element
<p>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 <strong>keyboard focus</strong> (the "p" element) like the followings, then, ofcourse nothing will happens when I press a keyboard.</p>

<p>However, if I change "p" element by the whole <strong>document</strong> to add that keyboard event (let's say by changing my code to <strong>document.keydown = myFunction;</strong> ), 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:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;    
&lt;p id = 'myId'&gt;Some Text&lt;/p&gt;

&lt;script&gt;

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;

&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Thank you!</p>
