直接上代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .first { width: 500px; height: 500px; background-color: #0000cc; } .second { width: 300px; height: 300px; background-color: yellow; } </style> </head> <body> <!--第一层DIV--> <div class="first"> <!--第二层DIV--> <div class="second"> <!--第三层中有个button--> <input type="button" value="click" class="btn" /> </div> </div> <script type="text/javascript"> window.onload = function () { register(); }; function register() { //获取div以及button let div1 = document.getElementsByClassName('first')[0]; let div2 = document.getElementsByClassName('second')[0]; let btn = document.getElementsByClassName('btn')[0]; //为三个目标标签注册点击事件 div1.addEventListener('click', func, false); div2.addEventListener('click', func, false); btn.addEventListener('click', func, false); } function func() { let dict = { '1': '捕获阶段', '2': '处于目标阶段', '3': '冒泡阶段' }; alert(this.className.toLowerCase() + '的事件在' + dict[event.eventPhase] + '被触发'); } </script> </body> </html>
先看一下运行效果:
现在点击按钮,会弹出三个对话框:
看到这里,聪明的你再稍微思考一下,应该就懂得事件冒泡了,可以把代码中addEventListener中的false改为true,然后再看一下运行效果,然后你就理解事件捕获了。