<body>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
<script>
/* 事件的执行:
1.当给一个元素添加一个事件元素的时候，根据dom结构，结构上的元素都会触发，同类事件类型
直到dom结构的最顶层对象（docunment）
执行的顺序：从目标（被点击的元素）元素往上依次执行
2.事件的捕获：
事件源.addEventListener('事件类型'，事件处理函数，boolean)
boolean为false(默认值)执行事件冒泡
boolea为true执行事件捕获
*/
var box1=document.querySelector('.box1');
var box2=document.querySelector('.box2');
var box3=document.querySelector('.box3');
box1.onclick=function(){
console.log('box1元素');
}
box2.oncilck=function(){
console.log('box2元素');
}
box3.oncilck=function(){
console.log('box3元素');
}
// 如果点击box1其执行的顺序为box1,box2,box3
// 点击box2时执行的顺序为：box2,box3
// 事件捕获：
box1.addEventListener('click',function(){
console.log('box1元素');
},true);
box2.addEventListener('click',function(){
console.log('box2元素');
},true);
box3.addEventListener('click',function(){
console.log('box3元素');
},true);
// 如果点击box1其执行的顺序为box3,box2,box1
// 点击box2时执行的顺序为：box3,box2
// 阻止事件冒泡：
/* 1.e.cancelBubble=ture 取消冒泡为真
2.e.stoppropagation()停止传播
*/
box1.addEventListener('click',function(){
console.log('box1元素');
},false);
e.cancelBubble=true;
// 或者用：e.stoppropagation()
box2.addEventListener('click',function(){
console.log('box2元素');
e.cancelBubble=true;
},false);
box3.addEventListener('click',function(){
console.log('box3元素');
e.cancelBubble=true;
},false);
</script>
