Event bubbling and event capture in js

1. IE only bubbles, W3c first captures and then bubbles
In view of my understanding of the difficult process of event bubbling and capturing (after reading several blog posts, I guess this problem is not very difficult ~ Later I found that it is not. It is difficult to apply it to advanced functions.) I want to write this article light enough for beginners to understand.
To facilitate the test (directly copy to html ):
• <Script type = "text/javascript">
• Document. write ("<div id = 'O' style = 'width: 400px; height: 400px; border: 1px solid # cccccc'> <div id = 'M' style = 'width: 200px; height: 200px; border: 1px solid # CCCCCC; '> <div id =' I 'style = 'width: 100px; height: 100px; border: 1px solid # CCCCCC; '> </div> ");
• Function $ (id ){
• Return document. getElementById (id );
•}
• Function altin (){
• Alert ("in ");
•}
• Function altmiddle (){
• Alert ("middle ");
•}
• Function altout (){
• Alert ("out ")
•}
• $ ('O'). onclick = altout;
• $ ('M'). onclick = altmiddle;
• $ ('I'). onclick = altin;
• </Script>
This code is very intuitive,
Event bubbling: The event starts from the event. srcElement | event.tar get and bubbles up and down the document layer by layer until the document.
Event capture (process): starts from the document and goes down the document tree until the event target.
Key sentence: in IE browser, only the event bubbling process occurs. In W3c (or event capturing supported) browser, the capture process first occurs, and then the bubble process occurs. The preceding demo runs in IE and FF. In fact, the capture process has occurred in FF browser, but nothing has been captured yet ~
To add an event triggered by the capture process, you must:
AddEventListener ('click', functionname, true); // set the third parameter to true, indicating that the event is set for the capture process.
Go to another demo:
• <Script type = "text/javascript">
• Document. write ("<div id = 'O' style = 'width: 400px; height: 400px; border: 1px solid # cccccc'> <div id = 'M' style = 'width: 200px; height: 200px; border: 1px solid # CCCCCC; '> <div id =' I 'style = 'width: 100px; height: 100px; border: 1px solid # CCCCCC; '> </div> ");
• Function $ (id ){
• Return document. getElementById (id );
•}
• Function altin (){
• Alert ("in ");
•}
• Function altmiddle (){
• Alert ("middle ");
•}
• Function altout (){
• Alert ("out ")
•}
• $ ('O'). onclick = altout;
• // $ ('M'). onclick = altmiddle;
• $ ('M'). addEventListener ('click', altmiddle, true );
• $ ('I'). onclick = altin;
• </Script>
This cannot be run in IE ~
2. The process of event capture and bubbling is collectively referred to as event propagation.
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 ). Event bubbling and capture applications, there are various problems, and further research.

Author Zheng wenliang