Q:

Clicking  element > JavaScript output document.activeElement VS. event.target

I’m newbie in JavaScript. Here’s my code below.
Upon clicking a button, I understand why event.target returns span object (because that’s the innermost element I click. correct?). 
My doubt is, going by same logic why document.activeElement returns button object and not span object? Isn't it the span element that should be active when I click the button or not?!
Thanks in advance for your clarifications :=)
<!DOCTYPE html>
<head>
    <script type="text/javascript">
        function GetActive () {
            if (document.activeElement) {
               var output = document.getElementById ("output");
               output.innerHTML = document.activeElement + ’-’ + event.target
             }
        }
     </script>
 </head>
 <body onclick="GetActive ();">    
    Click anywhere on the page to get the active element <input id="myInput" value="input field" />

   <button> <span>Sample button</span> </button>

   <div id="output"></div>

</body>

A:

This happens because document.activeElement reports the element which is currently focused (or will receive keystrokes).

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

Since elements like span and div can't receive keystrokes or be focused on (by tabbing to them) ordinarily, they won't ever be the activeElement. Those tags will be the activeElement only when they can receive keystrokes or be "active", such as when you've made them contenteditable or given them a tabindex. 
Demo

