事件处理模型———— 事件冒泡，捕获

事件处理模型———— 事件冒泡，捕获

事件冒泡：
  结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，
自子元素冒泡向父元素。（自底向上）
 
事件捕获：
 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，
 自父级元素捕获至子元素（事件源元素）。（自顶向下）
 
IE没有捕获事件
 
触发顺序，先捕获，后冒泡。

focus, blur, change, submit, reset, select等事件不冒泡
 

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