Detailed event bubbling and event capture

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

IE 5.5:div, Body, document

HTML--Document, body, IE 6.0:div

Mozilla 1.0:div, body, HTML, document, window

(2) Capture event (event capturing): Events are triggered from the most imprecise object (Document object) and then to the most accurate (and can also be captured at the window level, but must be specifically specified by the developer).

(3) DOM event Flow: Supports both event models: capture-type and bubbling-type events, but capture-type events occur first . The two event streams touch all objects in the DOM, starting with the document object and ending at the Document object.

The most unique nature of the DOM event model is that text nodes also trigger events (not in IE).

Browsers that support the Internet standard Use the AddEventListener (event,fn,usecapture) method when adding an event, Kizhong the 3rd parameter usecapture is a Boolean value that is used to set the event to be executed when the event is captured, Or when the event bubbles. and the browser (IE) is not compatible with the Attachevent () method, this method does not have the relevant settings, but the IE event model by default when the event bubbling, that is, when the usecapture equals false execution, So it's safer to set the Usecapture to false when handling events, and also to implement a browser-compatible effect.

Detailed event bubbling and event capture