JS events for propagating the process
1, the interaction between the Javascript and HTML is achieved by the event.
The event is certain interactions occur instantaneously document or browser window.
You may be used to a predetermined event listener, so as to perform corresponding code when the event occurs.
2, DOM event flow there are three phases: the capture phase of the event, in the target phase, the event bubbling phase.
Event Flow : When an event occurs, an event propagation between the elements and the root node of the order, all the paths through which the nodes will receive the event, i.e., the communication process flow DOM events. Two event flow model event propagation order: event bubbling, event capture.
Event capture (event capturing): the most uncertain events from the event target to the most specific event goals. When the mouse clicks or trigger event dom, the browser will be starting from the root event has spread outside to the inside, will first trigger the parent element, then trigger sub-elements, progressive layers from outside to inside.
Event bubbling (dubbed bubbling): and event capture just the opposite, it is from the inside out event-triggered, that is, to determine the most from the event to the most uncertain events.
3, event propagation
Popular terms, the event spread is then from the outside from the inside out.
From outside to inside event propagation, event capture phase, layer by layer transfer from the inside out, as the event bubbling phase.
4, button's click event triggered p
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 7 <title>Document</title> 8 <style> 9 .main { 10 background-color: #e27; 11 padding: 2rem; 12 } 13 .mid { 14 background-color: #03f; 15 padding: 2rem; 16 } 17 p { 18 background-color: #300; 19 padding: 2rem; 20 } 21 </style> 22 </head> 23 24 <body> 25 <div class="main"> 26 <div class="mid"> 27 <p onclick="pClickHandle(event)"> 28 <button onclick="btnClickHandle(event)">按钮</button> 29 </p> 30 </div> 31 </div> </32 body > 33 is < Script > 34 is function btnClickHandle (E) { 35 the console.log ( " button is clicked " ); 36 the console.log (e.target); 37 [ the console.log (e.currentTarget); 38 is console.groupEnd (); 39 } 40 function pClickHandle (E) { 41 is the console.log ( " P label is clicked " ); 42 is the console.log (e.target); 43 is the console.log (e.currentTarget); 44 is console.groupEnd (); 45 } 46 47 </script> 48 </html>
Click the button, click the trigger event, from the inside out.
// target represents a tag trigger events
// currentTarget represents label binding events
The p-label target is an event that triggered the tag button
currentTarget p represents the bound label itself.
Capture stage 5, button-triggered events
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> .main { background-color: #e27; padding: 2rem; } .mid { background-color: #03f; padding: 2rem; } p { background-color: #300; padding: 2rem; } </style> </head> <body> <div class="main"> <div class="mid"> <p onclick="pClickHandle(event)"> <button onclick="btnClickHandle(event)">按钮</button> </p> </div> </div> </body> <script> const main = document.querySelector(".main"); const mid = document.querySelector(".mid"); const btn = document.querySelector("button" ); Const P = document.querySelector ( " P " ); function btnClickHandle (E) { the console.log ( " button is clicked " ); the console.log (e.target); the console.log (e.currentTarget) ; console.groupEnd (); } function pClickHandle (E) { the console.log ( " P label is clicked " ); the console.log (e.target); the console.log (e.currentTarget); console.groupEnd () ; } // assEventListener three parameters // parameter a indicating the type of event // parameters Second, the event represents the handler // parameters Third, whether to trigger the capture phase, the default is false, here changed to true btn.addEventListener ( " the Click " , function (E) { console.log ( " button is clicked, the capture phase " ); console.log (e.target); console.log (e.currentTarget); console.groupEnd (); }, to true ); p.addEventListener ( " the click " , function (E) { the console.log ( " P is clicked, the capture phase " ); the console.log (e.target); the console.log (e.currentTarget); console.groupEnd(); }, true ); </script> </html>
Click the button button, under normal circumstances it should be the first implementation phase of the capture, but the capture phase of the execution of the event shown below
The reason is because
btn event source is
spread on, spread on the event source has a relationship with only the order added
// assEventListener three parameters // parameters a, represents the type of event // parameters Second, the event represents the handler // parameters Third, whether to trigger the capture phase, the default is false, to true here btn.addEventListener ( // btn is the event source "the click" , function (E) { console.log ( "button is clicked, the capture phase" ); console.log (e.target); console.log (E. the currentTarget); console.groupEnd (); }, to true );
6, prohibit dissemination events
e.stopImmediatePropagation ();
// immediately stop event propagation, stop and not continue to go back
e.stopPropagation ();
// stop event propagation, stop on my node, and then walk back from this node
p.addEventListener ( "the Click" , function (E) { the console.log ( "P is clicked, the capture phase" ); the console.log (e.target); the console.log (e.currentTarget); console.groupEnd (); // e.stopImmediatePropagation (); // immediately stop the event propagation e.stopPropagation (); // stop event propagation }, to true );
These are personal understanding of the incident spread, what we pointed out the inadequacies of hope.