On the event bubbling mechanism of JS

Many people have heard that JS event bubbling mechanism, in fact, this statement is still more vivid image, is a blister in the underwater, bubbling to the surface of the process.

That JS event bubbling mechanism, is a DOM tree, a first-level upward process, and ultimately to document this root node here.

Here is a small detail, after the DOM is clicked, all its parents will trigger the event, each level of the bound event will be triggered, which is consumed by events and performance to handle, but if we bind the event to the document root node, so that only need at the last level, The difference is that the DOM triggers the line, which is also called the event delegate.

In fact, this scenario is suitable for situations where child nodes and many parent nodes have event bindings so that multiple events are not triggered to achieve the desired effect.

On the event bubbling mechanism of JS