Js event bubble and event capture details

(1) bubbling 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 - > The document

  Internet explorer 6.0: div - > Body - > HTML - > The document

  Mozilla 1.0: div - > Body - > HTML - > The document - > The window

(2) event capturing: events are triggered from the most imprecise object (document object) to the most precise (you can also capture events at the window level, but they must be specified by the developer).

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

< img border = 0 SRC = "/ / files.jb51.net/file_images/article/201310/20131028160201571.jpg" >

Event capture phase: the event starts at the top level of the tag and looks down until the event target is captured.
Event bubbling phase: the event starts at the event target and bubbles up to the top TAB of the page.

Suppose an element div has a child element p.
< Div>
< P> Elements < / p>
< / div>
Both 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 sequence of events?
 
Two kinds of model
Previously, Netscape and Microsoft were implemented differently.

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

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

Event capture
When you use event capture, parent element fires first, child element fires later, div fires first, p fires later.

The event bubbling
When you bubble with events, child elements fire first, parent elements fire after, that is, p fires first, div fires after.

The W3C model
The W3C model neutralizes the two. In the W3C model, any event that occurs is captured from the top level until the event trigger reaches the event source element. Then, the event bubbles up from the event source until it reaches the document.

The programmer can choose whether to use event capture or event bubble when binding an event by using the addEventListener function, which has three parameters. If the third parameter is true, it means to use event capture, and if it is false, it means to use event bubble.

Ele. AddEventListener (' click 'doSomething2, true)

True = capture

False = bubbling

Ele. Onclick = doSomething2

Ele. AttachEvent (" onclick ", doSomething2);

P.S. event bubbling: the event starts with the target (event.srcelement ||event.target) and bubbles up the document layer by layer until it reaches the document.

The spread of events can be prevented:
The & # 8226; In W3c, you use the stopPropagation () method
The & # 8226; CancelBubble = true in IE;
StopPropagation () during capture; After that, the subsequent bubbling process will not occur
3. Default behavior for blocking events, such as click < A> After the jump ~
The & # 8226; In W3c, use the preventDefault () method;
The & # 8226; Set window.event.returnvalue = false under IE;
4. Wow, I finally finished writing, while testing, not all events can bubble, such as: blur, focus, load, unload, (this is from someone else's article, I did not test).