The flow of events is divided into three phases: the capture phase , the goal stage , bubbling phase .
Capturing phase: The event started from the topmost element, a layer down until the precise elements.
Target stages: event executed on the precise elements.
Bubbling phase: The event started from the precise elements, a layer up until the top-level elements (Note: The top-level element is advanced browser window, ie8 browser following top-level element is document)
DOM2-level event binding way
Advanced browser binding way:
Elements .addEventListener (of the type, Handler, boolean);
// Bind
type event type string with no on
handler event handler
boolean Boolean value that is true if the binding is bound to the capture phase or bound to the bubbling phase
Elements .removeEventListener (of the type, Handler, boolean);
// remove bindings
type event type string with no on
handler event handler
If true boolean Boolean value is to remove the capture phase or the bubbling phase removed
IE8 following browsers binding way
(does not support addEventListener)
Elements .attachEvent (of the type, Handler)
// Bind
type string band on the event type
handler event handler
Elements .detachEvent (of the type, Handler)
// remove bindings
type string band on the event type
handler event handler
(Note: ie8 following browsers binding, there is no third argument, that they can not bind to the capture phase)
dom2 level events can be repeated binding, the order of execution in the advanced browser from top to bottom. Browser is a flashback to perform in the following ie8, but when attachEvent dom0 level and perform together, will first perform 0, then execute flashback.