JS之事件处理模型——事件冒泡、事件捕获

1、事件冒泡     结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）

<div class="wrapper"> <div class="content"> <div class="box"> </div> </div> </div> <script type="text/javascript"> var wrapper = document.getElementsByClassName('wrapper')[0]; var content = document.getElementsByClassName('content')[0]; var box = document.getElementsByClassName('box')[0]; wrapper.addEventListener('click',function(){ console.log('wrapper'); },false); content.addEventListener('click',function(){ console.log('content'); },false); box.addEventListener('click',function(){ console.log('box'); },false); </script>

 css代码：

.wrapper{ width: 300px; height: 300px; background-color: red; } .content{ width:200px; height: 200px; background-color: green; } .box{ width:100px; height: 100px; background-color: orange; }

当我们依次点击橘色和绿色的区域的时候，他们都会一级一级的冒泡到他们的父元素。从代码的视觉上是自底向上的。

。

为了验证是结构上的嵌套关系不是视觉上的嵌套关系。我们将CSS代码稍作修改

.wrapper{ width: 300px; height: 300px; background-color: red; } .content{ margin-left: 300px; width:200px; height: 200px; background-color: green; } .box{ margin-left: 200px; width:100px; height: 100px; background-color: orange;

然后依次点击box、content、wrapper三个部分得到相同结果：

2、事件捕获     结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）     IE没有捕获事件

<div class="wrapper"> <div class="content"> <div class="box"> </div> </div> </div> <script type="text/javascript"> var wrapper = document.getElementsByClassName('wrapper')[0]; var content = document.getElementsByClassName('content')[0]; var box = document.getElementsByClassName('box')[0]; wrapper.addEventListener('click',function(){ console.log('wrapper'); },true); content.addEventListener('click',function(){ console.log('content'); },true); box.addEventListener('click',function(){ console.log('box'); },true); </script>

CSS代码：

.wrapper{ width: 300px; height: 300px; background-color: red; } .content{ width:200px; height: 200px; background-color: green; } .box{ width:100px; height: 100px; background-color: orange; }

依次点击box、content、wrapper区域，每一次点击时，子元素的父级会先捕获到信息，然后再冒泡到子元素。

触发顺序，一定是先捕获，后冒泡

<script type="text/javascript"> var wrapper = document.getElementsByClassName('wrapper')[0]; var content = document.getElementsByClassName('content')[0]; var box = document.getElementsByClassName('box')[0]; // 事件冒泡 wrapper.addEventListener('click',function(){ console.log('wrapper'); },true); content.addEventListener('click',function(){ console.log('content'); },true); box.addEventListener('click',function(){ console.log('box'); },true); wrapper.addEventListener('click',function(){ console.log('wrapperBb'); },false); content.addEventListener('click',function(){ console.log('contentBb'); },false); box.addEventListener('click',function(){ console.log('boxBb'); },false); </script>

<script type="text/javascript"> var wrapper = document.getElementsByClassName('wrapper')[0]; var content = document.getElementsByClassName('content')[0]; var box = document.getElementsByClassName('box')[0]; // 事件冒泡 wrapper.addEventListener('click',function(){ console.log('wrapperBb'); },false); content.addEventListener('click',function(){ console.log('contentBb'); },false); box.addEventListener('click',function(){ console.log('boxBb'); },false); wrapper.addEventListener('click',function(){ console.log('wrapper'); },true); content.addEventListener('click',function(){ console.log('content'); },true); box.addEventListener('click',function(){ console.log('box'); },true); </script>

这里我们发现点击box时先出现boxBb，这是因为点击box时先捕获wrapper区域，再捕获content区域，然后是box区域的事件执行，然后依次向父级冒泡。box区域有两个事件执行，事件执行的先后顺序是谁先绑定先执行谁。因此出现这个结果。