Event bubbling and event capture in js

(1) bubble events: events are triggered in the order from the most specific event target to the least specific event Target (document Object.

Internet Explorer 5.5: div-> body-> document

Internet Explorer 6.0: div-> body-> html-> document

Mozilla 1.0: div-> body-> html-> document-> window

(2) event capturing: events are triggered starting from the most inaccurate object (document Object), and then to the most precise (events can also be captured at the window level, but it must be specified by developers ).

(3) DOM event stream: two types of event models are supported at the same time: capture-type events and bubble-type events. However, capture-type events occur first. The two event streams touch all the objects in the DOM, starting from the document Object and ending the document Object.

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

Supports W3C standard browsers to use the addEventListener (event, fn, useCapture) method when adding events. In the base, the 3rd parameter useCapture is a Boolean value to set the event to be executed during event capture, or when the event is bubbling. The W3C-compatible browser (IE) uses the attachEvent () method. This method has no relevant settings. However, the event model of IE is executed during event bubbling by default, that is, it is executed when useCapture is equal to false. Therefore, it is safer to set useCapture to false when processing events, and it is also compatible with browsers.

Event capture phase: searches for events from the top-level tag until the event target is captured ).
Event bubble stage: events start from the event target and bubble up until the top-level tag of the page.

Assume that an element div has a lower-level element p.
<Div>
<P> element </p>
</Div>
The two elements are bound to the click event. 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 event sequence?
 
Two Models
Previously, Netscape and Microsoft were different implementations.

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

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

The processing order of the two events is the opposite. IE only supports event bubbling, Mozilla, Opera 7, and Konqueror. The earlier versions of Opera's and iCab are not supported.

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

Event bubbling
When you use event bubbling, child-level elements are triggered first, parent-level elements are triggered later, that is, p is triggered first, and div is then triggered.

W3C Model
The W3C model neutralization the two. In the W3C model, event capture starts from the top layer when any event occurs until the event is triggered to the event source element. Then, the event bubbles up from the event source until it reaches the document.

Programmers can choose whether to use event capture or event bubbling when binding events. The method is to use the addEventListener function when binding events. It has three parameters. If the third parameter is true, event capture is used. If it is false, event bubbling is used.

Ele. addEventListener ('click', doSomething2, true)

True = capture

False = Bubble

Traditional event binding methods
In a browser that supports W3C DOM, the event binding method is generally event bubbling.

Ele. onclick = doSomething2

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

Ele. attachEvent ("onclick", doSomething2 );

Appendix: event bubbling (process): The event starts from the event. srcElement | event.tar get, and bubbles up and down the document layer by layer until the document.

Event propagation can be prevented:
• In W3c, use the stopPropagation () method
• Set cancelBubble = true in IE;
StopPropagation (); in the capture process, the subsequent bubble process will not happen ~
3. Block the default action of the event, such as the jump after clicking <a> ~
• Use the preventDefault () method in W3c;
• Set window. event. returnValue = false in IE;
4. wow, I have finally finished writing. Not all events can bubble up while testing, such as blur, focus, load, and unload, (This is taken from others' articles. I did not test it ).