Perform event capture before event bubbling

Event handlers:

Conclusion:

HTML DOM0 is always bubbling by default DOM2 addEventListener(the third argument is true to capture false to bubble)

html

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> #father{width: 500px; height: 500px; background-color: aqua; border: 2px solid springgreen; display: flex; justify-content:center; align-items:center; } #son-button{ width: 150px; height: 100px; background-color: orange; border-radius: 10px; } #son-span{ width: 100px; height: 50px; background-color: purple; color: white; } </style> </head> <body> <div> <div id="father" onclick="console.log "> <button id="son-button" Onclick ="console.log "> <span id ="son-span" onclick="console.log "> <span > </span> </button> </div> </div> <script> </script> </body> </html>Copy the code

DOM0

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> #father {width: 500px; height: 500px; background-color: aqua; border: 2px solid springgreen; display: flex; justify-content: center; align-items: center; } #son-button { width: 150px; height: 100px; background-color: orange; border-radius: 10px; } #son-span { width: 100px; height: 50px; background-color: purple; color: white; </style> </head> <body> <div> <div id="father"> <span id="son-span"> </span> </span> </div> </div> <script> var father = document.getElementById('father') var button = document.getElementById('son-button') Var span = document.getelementbyid ('son-span') father. Onclick = function(){console.log(" I am father"); } button.onclick = function(){console.log(" I'm button"); } span. Onclick = function(){console.log(" I am span"); } </script> </body> </html>Copy the code

DOM2

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> #father {width: 500px; height: 500px; background-color: aqua; border: 2px solid springgreen; display: flex; justify-content: center; align-items: center; } #son-button { width: 150px; height: 100px; background-color: orange; border-radius: 10px; } #son-span { width: 100px; height: 50px; background-color: purple; color: white; </style> </head> <body> <div> <div id="father"> <span id="son-span"> </span> </span> </div> </div> <script> var father = document.getElementById('father') var button = document.getElementById('son-button')  var span = document.getElementById('son-span') var printName = function(){ // console.log(this); // Click the dom node console.log(this.nodename); } // father.addEventListener('click',printName,false) // button.addEventListener('click',printName,false) // span.addEventListener('click',printName,false) father.addEventListener('click',printName,true) button.addEventListener('click',printName,true) span.addEventListener('click',printName,true) </script> </body> </html>Copy the code

Interview questions:

The priority of the capture is that the capture with a higher bubble is executed first

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>Document</title> <style>. Grandma {width: 800px; height: 800px; background-color: blue; } .mother { width: 700px; height: 700px; background-color: orange; } .daughter { width: 600px; height: 600px; background-color: orchid; } .baby { width: 500px; height: 500px; background-color: red; } </style> </head> <body> <div class="grandma"> grandma <div class="mother"> mother <div class="daughter"> daughter <div Class = "baby" > baby baby < / div > < / div > < / div > < / div > < script > var. Grandma = document getElementsByClassName (' grandma ') [0] var  mother = document.getElementsByClassName('mother')[0] var daughter = document.getElementsByClassName('daughter')[0] var  baby = document.getElementsByClassName('baby')[0] // console.log(baby); var printName = function () { // console.log(this); // Click the dom node console.log(this.classname); } baby. AddEventListener (" click ", printName, false) / / bubbling daughter. The addEventListener (" click ", printName, True)// Capture mother.addEventListener("click", printName, true)// Capture Grandmother. onclick = printName; Baby // mother // daughter // baby // Grandma </script> </body> </ HTML >Copy the code