事件冒泡与事件捕获详解

事件流

概念

首先，我们来了解一下什么是事件流。

事件流：当事件发生时，会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播， 这个过程称之为事件流。

（当页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程称为事件流。）

分类

事件流可分为冒泡型事件流、捕获型事件流。

（1）事件冒泡：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。

查找事件（事件响应）的顺序：文本节点–>元素节点—>body—>html—>document（例如点击事件）<向上响应>

（2）捕获事件：网景公司提出的，事件由父元素传递到子元素的过程叫做事件捕获。（ture）

查找事件（事件响应）的顺序：document–>html–>body–>元素节点–>文本节点 <向下响应>

应用

在使用"事件监听"的方式绑定事件时，可以设置事件的响应方式。

DOM对象.addEventListener(事件，事件处理程序，事件冒泡方式)

事件冒泡方式：

（1）默认为false，表示冒泡阶段完成事件处理

（2）true为捕获阶段完成事件处理

例如：

<div class="father">father
        <div class="son">son</div>
    </div>

    <script>
        father=document.querySelector('.father')
        son=document.querySelector('.son')
        father.addEventListener('click',function(){
            alert('father')
        })
        
        son.addEventListener('click',function(){
            alert('son')
        })   //事件冒泡
    </script>

事件冒泡方式：son——>father——>body——>html——>document
son绑定的点击事件，没有设置事件流方式，默认的事件流类型为false（事件冒泡），当点击son盒子的时候，事件流向上冒泡，首先弹出son消息框，再弹出father消息框。

阻止事件冒泡的方式

常用方法：

（1）事件委托：将元素的绑定事件写起其父元素上，防止事件冒泡

（2）event.stopPropagation()：可以阻止事件冒泡，阻止父级元素的绑定事件

son.addEventListener('click',function(e){
    alert('son')
    e.stopPropagation();   //阻止事件冒泡
}) 

上面的例子中，加上e.stopPropagation()这句话，当点击son元素时，只会弹出son的弹窗，不加上这句话，点击son元素，会先弹出son，再弹出father。