How does the keyboard-event trigger a sibling button's click event? (jsfiddle inside)

How does the keyboard-event trigger a sibling button's click event?
(jsfiddle inside)

The setup in question can be tested and altered here:
http://jsfiddle.net/5hAQ8/9/
I have a small form (basically just an input field with a clear-button).
The JavaScript is trivial and just illustrates the problem. Basically it's
three listeners on input(keyup), button(click/tap) and form(submit). The
HTML is very simple:
<form>
<input>
<button>X</button>
</form>
The X is intended to clear the field, but that's not the point. When
someone presses [enter], even while the input is in focus, the button will
get triggered. You may test this yourself in the linked jsfiddle above.
Once you press [enter] inside the form, you will see three alerts: one for
the input, one for the button, one for the form. I can't understand why
the button and the form would be involved at all?
My understanding of DOM events would have been a keyboard-event
originating from the input, bubbling up to document. But i took every
measure to cancel that event. So my question is threefold:
why does the event get to the <button> at all?
why does the button trigger its listener (which is on click and tap) even
though the event is a keyup?
why don't the preventDefaults / stopPropagations kick in.