概念
- 事件捕获:事件捕获就是从上往下一级一级往下找,先找父级在找子级(如下图)
- 先捕获,再冒泡!
- 冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递(如下图)
- 大白话:冒泡就是类似于试水里的气泡,一直向上冒,所以叫冒泡嘛
案例演示
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>捕获与冒泡</title> <style> .div1{ width: 600px; height: 600px; background-color: pink; display: flex; justify-content: center; align-items: center; } .div2{ width: 400px; height: 400px; background-color: rgb(227, 75, 75); display: flex; justify-content: center; align-items: center; } .div3{ width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="div1"> <div class="div2"> <div class="div3"></div> </div> </div> <script> const div1 = document.querySelector('.div1') const div2 = document.querySelector('.div2') const div3 = document.querySelector('.div3') div1.onclick = () => { console.log(111); } div2.onclick = () => { console.log(222); } div3.onclick = () => { console.log(333); } </script> </body> </html>
- 当我点击最里面的 蓝色div3
可以看到分别输出3-2-1,原理:先是事件捕获从外到内,然后捕获到触发点击事件的div3,再从触发的事件开始向外冒泡,一直冒泡的最外层
-
当我点击最中间的 蓝色div2
-
可以看到分别输出 2-1,原理:先是事件捕获从外到内,然后捕获到触发点击事件的div2,再从触发的事件开始向外冒泡,一直冒泡的最外层div1;