Bubble / Capture Event - Where Does It Start / End?

Question

I understand that an event has two modes - bubble and capture.

When an event is set to a bubble, is Javascript checked for a "document"?

When an event is set to capture, does Javascript always start with a "document"?

How does Javascript know where to stop / start?

Update:

Say I have the following code in a body tag.

<div id='outer'> <div id='inner'></div> </div> 

When I set the event to #inner for bubbles, does Javascript check the document or stop at #outer?

Answer 1

Bubbling Event

JavaScript fully validates the document. If you add a listener to the document and a listener on the inside, both listeners light up.

Event Recording

JavaScript starts with a document and goes to the inside. If you add a listener to the document and a listener on the inside, both listeners shoot.


My findings

Turns out the browser does some smart processing so that it

a) no need to iterate over the entire hierarchical parent element

and

b) no need to go through all the events.


Evidence

a) The browser does not take time to trigger both click events when the inner div is pressed:

Fiddle

b) The browser does not have enough time to trigger both click events when the internal div is pressed, when there are many other events that are associated with other DOM elements, and not with the parent hierarchy:

Fiddle

Answer 2

From W3C Document Object Model Events

I know that I'm nitpicking, but this is not javascript that handles the events you describe, this is the DOM engine (Document Object Model). The browser has bindings between the javascript and DOM mechanisms so that events can propagate to javascript, but this is not limited to javascript. For example, MSIE supports BASIC.

When an event is set to a bubble, is Javascript checked for a "document"?

1.2.3 "This upstream distribution will continue through to the Document, including the Document."

"Any event handler can decide to prevent further event propagation by calling the stopPropagation method of the Event interface. If any EventListener calls this method, all additional EventListeners in the current EventTarget will be fired, but the bubbles will stop at that level."

When an event is set to capture, does Javascript always start with a "document"?

1.2.2 "Capture works from the top of the tree, usually with a document"

Answer 3

Partial answer ..

1 - When an event is set to a bubble, is Javascript checked for "document"?

No, if one of the hierarchy members decides to stop the bubble by calling stopPropagation ()