JavaScript--Event capture, event bubbling

When using JS, when the same event is defined for the child element and parent element, such as the onclick event is defined, and when the child element is clicked, the OnClick event of the parent element is also triggered. JS says the mechanism for this event to occur continuously is event bubbling or event capture.

Why are there events bubbling and catching? For the first time, IE browser and Natscape browser to their own browser of the event adopted a different mechanism,IE browser used bubble type : Define the same event nested elements, when the event is triggered, the child element has priority, that is, from the inside Out, Like a bubble in the water, from the inside out. The Netscape uses the opposite approach, that is, the capture type , the parent element has priority, the outermost element occurs first.

Later, the organization unified the standard, in any of the event model, the event first into the outside into the capture phase, and then into the bubbling phase from the inside out.

(1) bubbling event : The event is triggered in the order from the most specific event target to the least specific event target (Document object). Start with the event target and bubble up until the top-level label on the page.

IE 5.5:div, Body, document

HTML--Document, body, IE 6.0:div

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

(2) capture event : The event is 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). Start looking down from the top-level tab until you capture the event target.

(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).

Suppose an element Div, which has a subordinate element p.

For example:

<div> <p> Elements </p></div>

Both of these elements are bound to the Click event, and if the user clicks P, for the bubbling type, the Click event of P is first triggered, and then the click event of the div is triggered;

Browsers that support the Web standard use the AddEventListener (event,fn,usecapture) method when adding events, where the 3rd parameter usecapture is a Boolean value that sets whether the event is executed at event capture or event bubbling

When executed.

and the Internet browser (IE) is not compatible with the Attachevent () method, this method does not have the relevant settings, but the IE event model is executed by default when the event bubbles, that is, when the usecapture equals false execution, so the processing

Setting the Usecapture to False when the event is more secure and also implements a browser-compatible effect.

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 the third argument is true, which means that the event is captured and, if false, the table

Event bubbling is used.

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

True= capture

False= Bubble

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.

Event Propagation (bubbling) 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 ~

The default behavior of an event can be blocked

For example, click <a> after jump ~
Use the Preventdefault () method in the user's list;
Set Window.event.returnValue = False under IE;

Note: Not all events can bubble, for example: Blur, focus, load, unload

JavaScript--Event capture, event bubbling