Detailed description of event bubbling and event capture for JavaScript

How to use events and what are the main differences between the IE and DOM event models, a friend you need to refer to

(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 is safer to set Usecapture to false when handling events, and also to achieve a compatible browser effect.

Event Capture phase: Events are looked up from the top level of the label until the event target is captured.
Event bubbling stage: The event starts with the event target and bubbles up to the top level of the page label.

Suppose an element Div, which has a subordinate element p.
<div>
<p> Elements </p>
</div>
Both of these elements are bound to the Click event, and if the user clicks P, it triggers the Click event on both Div and P, which of the two event handlers executes first? What is the order of events?

Two types of models
Previously, Netscape and Microsoft were different implementations.

In Netscape, the div is triggered first, which is called event capture.

In Microsoft, p is triggered first, which is called event bubbling.

The two kinds of event processing order are reversed. IE only supports event bubbling, Mozilla, Opera 7 and Konqueror two support, older versions of opera ' s and icab two are not supported.

Event capture
When you use event capture, the parent element is triggered first, the child element is triggered, that is, the div is triggered first, and P is triggered.

Event bubbling
When you use event bubbling, the child element is triggered first, the parent element fires, that is, p fires first, and the div fires.

Model
The model is to neutralize the two, and in the model, when any event occurs, the event is captured first from the top level until the event trigger arrives at the event source element. Then, the event bubbles up from the event source until the document is reached.

The programmer can choose whether to use event capture or event bubbling when binding an event by using the AddEventListener function, which has three parameters, and if the third parameter is true, the event is captured, or false, which indicates that event bubbling is used.

Ele.addeventlistener (' click ', dosomething2,true)

True= capture

False= Bubble

Traditional bound Event mode
In a browser that supports the DOM, the usual way to bind events is to use event bubbling.

Ele.onclick = DoSomething2

IE browser
As mentioned above, IE only supports event bubbling, does not support event capture, it does not support the AddEventListener function, does not use a third parameter to indicate whether it is bubbling or capturing, and it provides another function attachevent.

Ele.attachevent ("onclick", doSomething2);

Attached: event bubbling (The process): the event from which the object occurred (event.srcelement| | Event.target) starts by bubbling up the document up and down, to the documents.

The propagation of events can be prevented:
? In the Stoppropagation () method, use the
? Set cancelbubble = True under IE;
Stoppropagation () in the process of capture, the subsequent bubbling process does not occur ~
3. Blocking the default behavior of the event, such as Click <a> Jump ~
? Use the Preventdefault () method in the user's list;
? Set Window.event.returnValue = False under IE;

Sharing is over. Finally, thank you for reading! If you have any suggestions, please come forward! Thank you 1

Detailed description of event bubbling and event capture for JavaScript