阅读的文章是关于事件捕获与事件冒泡先后执行顺序 ,写得挺好的,就是我读的时候漏了一点。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>DOM 冒泡</title> <style type="text/css" media="all"> #parent { height: 100px; width: 100%; background: green; } #child { height: 50px; width: 50%; background: yellow; } #button { height: 30px; width: 10%; background: white; } </style> </head> <body> <div id="parent"> <div id="child"> <div id="button">按钮</div> </div> </div> <script> window.onload = function() { const qId = (name) => document.getElementById(name); const qTg = (name) => document.getElementsByTagName(name)[0]; const parent = qId('parent'); const child = qId('child'); const button = qId('button'); parent.addEventListener('click', () => console.log('parent click 事件'), true); child.addEventListener('click', () => console.log('child click 事件'), true); button.onclick = () => console.log('button click 冒泡'); button.addEventListener('click', () => console.log('button click 事件'), true); parent.onclick = () => console.log('parent click 冒泡'); child.onclick = () => console.log('child click 冒泡'); } </script> </body> </html> 首先结论是对的。