Bubble 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 warn b and then t . because we clicked on the button, which then deflated the event into a table.

So, according to the event chain, the html tree should look like this:

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

This means that the bubble of events is up (as they say - from bottom to top).

Question:

I know that the dom tree is located as my drawing (like a tree) , but is the html tree located in the opposite direction (flip vertical)? because I see many examples that show that the tower is built from the bottom up:

I mean:

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

But here, the bubble event - there should be a “down” bubble, because, as we saw, the button starts first ...

Answer 1

Is the html tree in the opposite direction (vertical flipping)? because I see many examples that show that the tower is built from the bottom up

This is a DOM tree, not a DOM tower. In computer science, the convention is to draw trees with their root at the top and their sheets at the bottom.

The terms “up” and “down” make more sense if you think of the DOM as nested (which is really so), and not just connected in a certain direction. Then you will plunge into more detailed structures and move to the upper layers.

For a definitive answer, read the Sending Events section and the DOM Stream Events section in the W3 specification.

Answer 2

it is simply called event bubbling or event propagation , the direction does not really matter ...

But it is often called bubble up , because they represent the tree as follows:

• document
  • Div
  • table
    • tr
      • td
        • Button
  • R
  • Div
    • R
      • range

and thus it again bubbles up ... until it reaches the root.

Notice how the tree view follows, how you actually write the HTML structure.

Answer 3

Web browsers do not have mechanisms of mutual equilibrium and therefore are completely unaware of the concepts of "up" and "down." Whether a tree structure is illustrated as expanding up on a page (or screen) or down is simply a matter of convenience to support some idea.

We think of “bubbles”, probably because we also think of the “depth” of the DOM nodes in the tree. If the child node, like your button, is at a certain depth, then its parent chain is at a lesser depth. Since the event is transmitted to event handlers at decreasing depths, it’s good, which resembles an ascent from deep water to shallow, like bubbles.

Again, the concept of “depth” is just a colloquial mnemonic that helps us maintain the DOM structure in our heads. An isomorphic set of terms will work just as well as we all get used to them. For example, if we had a common word in English, when the experience of a white squirrel falling from a tree stumbled on branches along the road, we could use this instead of a “bubble” (assuming that we can deal with violent images of a bruised baby squirrel )

Answer 4

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

 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.net/ajx8q/

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

Answer 5

This is how the method is called. This is basically conceptual, and it doesn’t really matter how this method works.

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

So, if you want the event to pass the parent node in the hierarchy, you will have a (conceptually) upward movement.

(It doesn't matter if you really represent your hierarchy.)