On JavaScript event bubbling and event capture

What is a DOM event?events are classified as DOM 0-level events and Dom 2-level events, and DOM2-level events are also known as event snooping. The disadvantage of DOM level 0 events is that if the event is the same, the event of the latter overwrites the former event, and the DOM2 level event resolves the problem. what is the method of DOM2 level event?

AddEventListener ()Parameter 1: Event type does not need to be added onParameter 2: callback functionParameter 3: Boolean true means capture false for bubblingUnbind Event Method: RemoveEventListener ()However, IE does not support this methodIE Browser under: attachevent ()Parameter 1: Event type needs to be added onParameter 2: callback functionUnbind Event Method: DetachEvent ()What is the DOM event stream? when an HTML element produces an event, the event propagates through the path between the element node and the root node, and the node that passes through the path receives the event, which is called the DOM event stream. DOM Event Flow: Divides the event into three stages: capture, target, and bubbling. The processing function of the capture stage is called first, then the handler function of the target stage is called, and the handler function of the bubbling stage is called finally. When a URL request is issued, the pre-interceptor is called, followed by the action, and finally the post-interceptor is called. What is event bubbling? What is event capture? Bubbling event: Microsoft raises the event that a child element is passed to the parent element, called bubblingCapture Event: The process by which Netscape presents an event passed by a parent element to a child element, called event captureEvent Proxy/event delegate

using the bubbling mechanism, the event of the child element is delegated to the parent element to listen (add an event to the parent element), and when the child element fires the event, the event bubbles to the parent if you want to specify a child element to trigger the event, you can get the event source (target) from the event object. Then pass the condition to determine whether the desired child element, if yes, executes the event, otherwise does not execute

What is the first thing to do when an event bubbles up with the capture?

The event is captured first, followed by the event bubbling, the code is as follows

1<script>2 3 varObig = document.getElementById ("Big");4 varOsmall = document.getElementById ("small");5 6Document.addeventlistener ("click",function(){7Alert ("I am the document---capture");8},true)9 TenDocument.addeventlistener ("click",function(){ OneAlert ("I am the document---bubbling"); A},false) -  -Document.body.addEventListener ("click",function(){ theAlert ("I am the body---bubbling"); -},false) -  -Document.body.addEventListener ("click",function(){ +Alert ("I am the body---capture"); -},true) +  AObig.addeventlistener ("click",function(){ atAlert ("I'm obig---capture"); -},true) -  -Obig.addeventlistener ("click",function(){ -Alert ("I'm obig---bubbling"); -},false) in  -Osmall.addeventlistener ("click",function(){ toAlert ("I am osmall--capture"); +},true) -  theOsmall.addeventlistener ("click",function(){ *Alert ("I'm osmall---bubbling"); $},false)Panax Notoginseng  -</script>

When event bubbling and event capture occur simultaneously, an event capture is performed before event bubbling. Event trapping is the process of a parent element to a child element, and event bubbling is the process of a descendant element to a parent element, so the whole process can be seen as an uppercase "V" process. In general, the event bubbling mechanism, use more, so in IE8 and before, ie only support event bubbling. Ie9+/ff/chrome These 2 models are supported, can be set by AddEventListener ((type, listener, usecapture) Usecapture, Usecapture=false represents event bubbling, Usecapture=true represents the adoption of event capture.

How do I organize event bubbling and event capture?

By default, multiple event handlers are executed in the order of the DOM event flow model. If an event occurs on a child element and does not need to execute the event handler that is registered on the parent element, then we can stop capturing and bubbling to avoid meaningless function calls. The 5 types of event bindings mentioned earlier can be used to prevent the propagation of events. Because of the 5th way, it is the most recommended practice. So we're looking at how to block the propagation of events based on the 5th way. IE8 and the continuation propagation of events that can be prevented by window.event.cancelbubble=true, Ie9+/ff/chrome prevents the continuation of events by Event.stoppropagation ().

using Event Object properties: Stoppropagation and Cancelbubble Stoppropagetion is a method: E.stoppropagetion (); the value of cancelbubble is a constant: E.cancelbubble = true;

<script>window.onload=function(){          varOutA = document.getElementById ("OutA"); varOutB = document.getElementById ("OutB"); varOUTC = document.getElementById ("OUTC"); //TargetOutc.addeventlistener (' click ',function(Event) {alert ("Target");          Event.stoppropagation (); },false); //Event BubblingOuta.addeventlistener (' click ',function() {alert ("bubble");},false); //Event CaptureOuta.addeventlistener (' click ',function() {alert ("Capture");},true);     }; </script> <body> <div id= "OutA" style= "width:400px; height:400px; Background: #CDC9C9;p osition:relative; " > <div id= "OutB" style= "height:200; Background: #0000ff; top:100px;position:relative; " > <div id= "OUTC" style= "height:100px; Background: #FFB90F; top:50px;position:relative; " ></div> </div> </div> </body>

When you click Outc, then print out capture-->target, not print out bubble. Because when an event propagates to a handler function on OUTC, the continuation propagation of the event is prevented by stoppropagation, so it does not continue to propagate to the bubbling phase.

On JavaScript event bubbling and event capture