bubble up events and html/dom structure?

Question

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...

Answer 1

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 computer 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.