Friday 15 November 2013

What does “event bubbling” mean?

Event bubbling means that an event propagates through the ancestors of the element the event fired on.

Lets show what this means using the HTML markup below:

<div>
    <h1>
        <a href="#">
            <span>Hello</span>
        </a>
    </h1>
</div>
Lets assume we click the span, which causes a click event to be fired on the span; nothing revolutionary so far. However, the event then propagates (or bubbles) to the parent of the span (the <a>), and a click event is fired on that. This process repeats for the next parent (or ancestor) up to the document element.

You can see the live example in action here

No comments:

Post a Comment