Event capture and event bubbling in JS

Objective
Some time ago to the freshman talk about JS events, by the way the event capture and event bubbling is how a thing, but did not give him concrete examples, here to add a sample, by the way to the rookie some specific code to see how bubbles and capture is a thing.

1. Event Capture
Capture Event (Event capturing): Events are triggered from the most imprecise object (Document object), and then to the most precise (or you can capture events at the window level, but must be specifically specified by the developer)

2. Event bubbling
Bubbling event: The event is triggered in the order from the most specific event target to the least specific event target (Document object).

3. Capturing and bubbling process diagram

Different browsers have different handling mechanisms for events
two kinds of models
In the past, Netscape and Microsoft were different implementations.
In Netscape, parent triggers first, which is called event capture.
In Microsoft, the child triggers first, which is called event bubbling.
The two sequence of event handling is just the opposite. IE only supports event bubbling, Chrome,mozilla, Opera 7 and Konqueror two are supported, the old version of opera ' s and icab two are not supported.

The model of the consortium
The model of the consortium is to neutralize the two, and in the model of the consortium, event capture begins at the top level when any event occurs, until the event trigger reaches the event source element. Then, the event bubbles up from the source of the event until the document is reached.

4. Instance Code

<! DOCTYPE html>