JS event bubbling and Event capture detailed introduction to _javascript tips

(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

IE 6.0:div-> body-> HTML-> document

Mozilla 1.0:div-> body-> HTML-> Document-> window

(2) Capture event (event capturing): Events trigger from the most imprecise object (Document object) and then to the most precise (or at the window level, which must be specifically specified by the developer).

(3) DOM event flow: Both event models are supported: capturing and bubbling events, but capturing events occur first. Both event flows touch all objects in the DOM, starting with the Document object, and ending with the Document object.

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

Browsers that support the Web-consortium standard Use the AddEventListener (event,fn,usecapture) method when adding events, Kizhong the 3rd parameter usecapture is a Boolean value that is used to set the event to execute when the event is captured. Or when the event bubbles. Browsers that are not compatible with the Web (IE) use the attachevent () method, this method has no relevant settings, but the IE event model is performed by default when the event bubbles, that is, when the usecapture equals false, So it's safer to set the Usecapture to false when handling events, and also to implement browser-compatible effects.

Event Capture Phase: an event is searched down from the top level of the tag until the event target (target) is captured.
Event bubbling phase: The event starts at the event target and bubbles up until the top level of the page tag.

Suppose an element Div, it 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 the Div and P, and which of these two event handlers executes first? What is the order of events?

Two kinds of models
In the past, Netscape and Microsoft were different implementations.

In Netscape, Div triggers first, which is called event capture.

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

The two sequence of event handling is just the opposite. IE only supports event bubbling, Mozilla, Opera 7 and Konqueror two are supported, and the older versions of opera's and icab two are not supported.

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

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

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.

The programmer can choose whether to bind events by event capture or event bubbling by themselves, by means of the AddEventListener function when the event is bound, with three arguments, and if the third argument is true, event trapping is used, or false, which means event bubbling.

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

True= capture

False= bubbling

Traditional binding Event Mode
In a browser that supports the universal DOM, the usual way of binding events like this is the event bubbling method used.

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 the third parameter to indicate bubble or capture, it provides another function attachevent.

Ele.attachevent ("onclick", doSomething2);

Attach: Event bubbling (Process): event from the target of occurrence (event.srcelement| | Event.target) begins, bubbling up and down the document, up to documents.

The propagation of events can be blocked:
• Using the Stoppropagation () method in the Consortium
• Set cancelbubble = True under IE;
Stoppropagation () During the capture process, and the bubbling process behind it will not occur.
3. Prevent the default behavior of events, such as Click <a> after the Jump ~
• Use the Preventdefault () method in the consortium;
• Set window.event.returnValue = False under IE;
4. Wow, finally finished, while testing the amount of writing, not all events can bubble, such as: Blur, focus, load, unload, (this is taken from someone else's article, I did not test).