<!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>事件冒泡和事件捕获</title> <!-- 事件冒泡和事件捕获是在直系亲属树内才会发生，如：儿子-爸爸-爷爷 ele.addEventListener(a,b,false/true);为元素ele添加事件a,触发事件时执行句柄b 事件冒泡： 第三个参数默认为false，称为事件冒泡 事件执行顺序：由下至上，往上冒泡；如：触发儿子的事件后，先执行儿子的句柄，再执行爸爸的句柄，最后执行爷爷的句柄 事件捕获： 第三个参数为true时；表示捕获了该事件，称为事件捕获 以下称被捕获事件为x，x的儿子称为x-1,x的爸爸称为x+1 事件执行顺序：触发x-1事件时，优先执行x的句柄，再执行x-1的的句柄，最后直系x+1的句柄 tip:通过子系事件触发事件冒泡，被捕获的事件执行顺序要优先于其子系事件，不影响其父系事件 --> <style> #grandpa{ width: 400px; height: 300px; border: 2px solid black; } #parent{ width: 300px; height: 200px; background: yellow; } #child{ width: 200px; height: 100px; background: red; border: 5px solid black; } </style> </head> <body> <div id="grandpa"> 爷爷 <div id="parent"> 爸爸 <div id="child">儿子</div> </div> </div> <script> var grandpa=document.getElementById("grandpa"); var parent=document.getElementById("parent"); var child=document.getElementById("child"); grandpa.addEventListener("click",function(){ alert("我是爷爷"); },false);//最后执行爷爷句柄 parent.addEventListener("click",function(){ alert("我是爸爸"); },true);//当触发儿子的事件时，爸爸句柄先执行 child.addEventListener("click",function(){ alert("我是儿子");//触发儿子事件后，执行爸爸句柄后再执行儿子句柄 },false); </script> </body> </html>