Consider this html :

   <table>
      <tr>
        <td>
         <input type="button"/>
        </td>
      </tr>
    </table>

And this js code :

$(":button").click(function (){alert('b')});
$("table").click(function (){alert('t')});

This will alert b and then t. because we pressed on button which then bubble up the event to the table.

So according to the chain of events the html tree should look like this:

+-------------------------------+
|                               | //table   
+------+------------------+-----+
       |                  |  //tr 
       +------------------+
            |        |   //td
            +--------+
              |    |    //button
              +----+

Which means the event bubble up ( as they say - from bottom to top).

Question :

I know that the dom tree is arranged as my drawing (as a tree), but does the html "tree" is arranged on the opposite direction ( flip vertical) ? because I see a lot of examples that shows a tower being built from bottom to top :

I mean :

     _        //button
   _____      //td
  ________    // tr
_____________ //table

But here , bubble up event - should be bubble "down" becuase as we saw , the button runs first...

Consider this html :

   <table>
      <tr>
        <td>
         <input type="button"/>
        </td>
      </tr>
    </table>

And this js code :

$(":button").click(function (){alert('b')});
$("table").click(function (){alert('t')});

This will alert b and then t. because we pressed on button which then bubble up the event to the table.

So according to the chain of events the html tree should look like this:

+-------------------------------+
|                               | //table   
+------+------------------+-----+
       |                  |  //tr 
       +------------------+
            |        |   //td
            +--------+
              |    |    //button
              +----+

Which means the event bubble up ( as they say - from bottom to top).

Question :

I know that the dom tree is arranged as my drawing (as a tree), but does the html "tree" is arranged on the opposite direction ( flip vertical) ? because I see a lot of examples that shows a tower being built from bottom to top :

I mean :

     _        //button
   _____      //td
  ________    // tr
_____________ //table

But here , bubble up event - should be bubble "down" becuase as we saw , the button runs first...

• javascript
• jquery
• html
• dom

Share Improve this question Follow edited Aug 6, 2013 at 14:35 Royi Namir asked Aug 6, 2013 at 14:31 Royi NamirRoyi Namir 149k144144 gold badges492492 silver badges831831 bronze badges 7

• Where did you see the inverted tree? The events bubble up. – bfavaretto Commented Aug 6, 2013 at 14:35
• @bfavaretto here for example (ils.indiana.edu/faculty/hrosenba/www/Workshops/CSS/Demo/…) and here (phpeveryday./articles/jQuery-Event-Object-P957.html) I can give a 1000 more – Royi Namir Commented Aug 6, 2013 at 14:36
• I see nested boxes in that link, and they look like a regular tree to me. – bfavaretto Commented Aug 6, 2013 at 14:44
• @bfavaretto look here javascript.info/tutorial/bubbling-and-capturing – Royi Namir Commented Aug 6, 2013 at 14:50
• 2 You are really over thinking this :) – colestrode Commented Aug 6, 2013 at 16:28

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 3

does the html "tree" is arranged on the opposite direction (flip vertical)? because I see a lot of examples that shows a tower being built from bottom to top

It's a DOM tree, not a DOM tower. In puter science the convention is to draw trees with their root at the top and their leafs at the bottom.

The terms "up" and "down" make more sense if you think of the DOM as nested (which it indeed is) instead of just being connected in some direction. Then you will dive down into the more detailed structures, and bubble back up to the outermost layers.

For a definitive answer, read the Event dispatch and DOM event flow chapter in the W3 specification.

Web browsers do not have auricular balance mechanisms, and are therefore utterly ignorant of the concepts of "up" and "down". Whether a tree structure is illustrated as expanding upwards on the page (or screen) or downwards is purely a matter of convenience to support some idea.

We think of "bubbling up" probably because we also think of the "depth" of DOM nodes in the tree. If a child node like your button is at a particular depth, then its chain of parents are at lesser depths. As an event is handed to event handlers at decreasing depths, well, that's reminiscent of ascending from deep water to shallow, like bubbles.

Again, however, that concept of "depth" is just a colloquial mnemonic to help us keep the structure of the DOM clear in our heads. An isomorphic set of terms would work just as well once we all got used to them. For example, if we had a mon word in English for the experience of a baby squirrel tumbling down out of a tree, bumping against branches on the way, we could use that instead of "bubble" (assuming we could handle the violent imagery of bruised baby squirrels).

it's just called event bubbling or event propagation, the direction does not really matter...

But it's often called bubble up because they represent the tree in the following way:

• document
  • div
  • table
    • tr
      • td
        • button
  • p
  • div
    • p
      • span

and thus like that, it bubbles 'up' again.... until it reaches the root.

Note how the tree representation follows how you actually write the HTML structure itself.

It's just how the method is named. It's mostly conceptual anyway and doesn't matter at all to how the method actually works.

For example, if you take any hierarchical structure, you will always have the base or the parent nodes at the top of the structure. (Think of file structures, ancestry trees..)

So if you want an event to propogate to the parent node in the hierarchy, you will have it (conceptually) move upwards.

(It doesn't matter though really how you visualize your hierarchy.)

The event first goes down the tree during the capture phase, then bubble up. You can intercept them during capture with the following, which alerts "t" first:

var btn = document.getElementById('btn');
var tbl = document.getElementById('tbl');

btn.addEventListener('click', function(){
    alert('b')
}, true);

tbl.addEventListener('click', function(){
    alert('t')
}, true);

http://jsfiddle/ajx8q/

Note that although I say "up" and "down" here, they are just conventions (see Pointy's answer).