Why do events bubble up the dom?

Question

I understand event bubbling and how it traverses up the dom from the inner-most element. I am curious as to why this is the default behaviour?

<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>

If I have an event listener on each part but click the <div>5</div> why does the event bubble up to div4, div3, div2(etc)'s event listeners?

EDIT: I don't see this as a duplicate of "what is event bubbling" because this is asking why not what

Answer 1

Your statement is wrong. The default for simple events is not to bubble:

Firing a simple event named e means that a trusted event with the name e, which does not bubble (except where otherwise stated) and is not cancelable (except where otherwise stated), and which uses the Event interface, must be created and dispatched at the given target.

So the HTML related events which bubble it's because the spec explicitly says so, presumably because it makes more sense this way.

Some events which bubble:

• Click events:

  Firing a click event means firing a synthetic mouse event named click, which bubbles and is cancelable.

• Unfocusing steps:

  fire a simple event that bubbles named change at the element.

Some events which do not bubble:

• Error events when updating image data

  fire a simple event named error at the img element

• Readystatechange events when changing the current document readiness

  fire a simple event named readystatechange at the Document object.