<!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> .box1{width:400px;height:400px;background: red} .box2{width:300px;height:300px;background: blue} .box3{width:200px;height:200px;background: green} </style> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> </body> <script> var obox1 = document.querySelector(".box1") var obox2 = document.querySelector(".box2") var obox3 = document.querySelector(".box3") obox1.addEventListener("click",function(){ alert("捕获red") },true) obox1.addEventListener("click",function(){ alert("冒泡red") },false) obox2.addEventListener("click",function(){ alert("捕获blue") },true) obox2.addEventListener("click",function(){ alert("冒泡blue") },false) obox3.addEventListener("click",function(){ alert("green") },false) // 事件流分为三个阶段: // 冒泡阶段:从里向外 // 目标(当前事件)阶段 // 捕获阶段:从外向内
若同事有冒泡和捕获,先捕获后冒泡。
IE浏览器没有捕获
</script> </html>