why do events bubble down instead of up?

I'm working on combining collapsible content with checkboxes to create a tree view of selectable items.

I can place a checkbox widget inside a collapsible content header but the header gets the click before the checkbox. Why? The event order appears to be the possible of normal dom events.

After spending a day on this I wonder if I should consider starting with a list widget instead but I'm still curious about this question.