Event bubbling/capturing - where does it start/end?

From W3C Document Object Model Events

I know I'm nitpicking but it isn't javascript that handles the events you are describing, it is the DOM-engine (Document Object Model). In the browser there are bindings between the javascript and DOM engines so that events can be propagated to javascript, but it is not limited to javascript. For example MSIE has support for BASIC.

When an event is set to bubble, does Javascript checks up to "document" ?

1.2.3 "This upward propagation will continue up to and including the Document"

"Any event handler may choose to prevent further event propagation by calling the stopPropagation method of the Event interface. If any EventListener calls this method, all additional EventListeners on the current EventTarget will be triggered but bubbling will cease at that level"

When an event is set to capture, does Javascript always starts from "document"?

1.2.2 "Capture operates from the top of the tree, generally the Document,"

Event bubbling

JavaScript checks all the way up to document. If you add a listener on document and a listener on inner, both listeners fire.

Event capturing

JavaScript starts from document and goes all the way down to inner. If you add a listener on document and a listener on inner, both listeners fire.


My Findings

Turns out that the browser does some sort of smart processing so that it

a) doesn't have to loop through the entire parent hierachy

and

b) doesn't have to loop through all events.


Proof

a) It takes the browser no time to trigger both click events when the inner div is clicked:

Fiddle

b) It takes the browser no time to trigger both click events when the inner div is clicked when lots of other events exist that are attached to other DOM elements not in the parent hierachy:

Fiddle