<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style>
div{position:absolute;margin:8px 20px;}
#div1{ 400px;height: 200px;border: 1px solid red;}
#div2{ 200px;height: 100px;border:1px solid green;}
#div3{ 100px;height: 50px;border: 1px solid yellow;}
</style>
<script>
window.onload=function()
{
/*
* true:捕获 进去时触发
* false:冒泡 出去触发
*/
var adiv=document.getElementsByTagName("div");
adiv[0].addEventListener("click",function(){alert ("进1");},true); //默认使用的是false冒泡
adiv[2].addEventListener("click",function(){alert ("进3");},true);
adiv[2].addEventListener("click",function(){alert ("出3");},false);
adiv[0].addEventListener("click",function(){alert ("出1");},false);
/*addEventListener函数的第三个参数是布尔值，true代表捕获。false代表冒泡，
* true:捕获--------《告诉该对象，触发它的事件从外向内经过时，执行》
* false:冒泡--------冒泡本是某个对象触发某事件后会将其传递给父级
* 在这里可理解为《告诉对象，触发它的事件由内向外经过时，执行》
* true or false 相当于门卫，来决定是进去还是出去时执行第二个参数的函数
*
*
* 本例中的可测试
* （1）、点击div3===》不是直接 执行div3的点击事件，而是从div1到div2到div3《进来》
* 再div3到div2到div1《出去》，事件的冒泡与捕获都是从document开始到目标节点，
* 再从目标节点到document结束
* 例如点击div2就是 进1--->出1 因为div2没有设置弹窗，并且不会深入的到div3
*/
}
</script>
</head>
<body>
<div id="div1">div1
<div id="div2">div2
<div id="div3">div3</div>
</div>
</div>
</body>
</html>