JavaScript（DOM）事件流--事件捕获、事件冒泡、阻止事件冒泡

DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：捕获阶段当前目标段冒泡阶段

JS代码中只能执行捕获或者冒泡其中一个阶段。onclick和attachEvent只能得到冒泡阶段

因此，在addEventListener()第三个参数如果是true，则表示捕获阶段调用时间处理程序。吐过第三个参数是false或者为空，则表示在事件冒泡阶段调用事件处理程序。

<head>
	<style>
        .father{
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: blue;
        }
        .son{
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son盒子 </div>
    </div>
    
    <script>
    	var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        //捕获阶段   document -> html -> body -> father -> son
        // son.addEventListener('click',function(){
        //     alert('son');
        // },true);
        // father.addEventListener('click',function(){
        //     alert('father');
        // },true);
        //点击son盒子，会先弹出father提示框，然后再弹出son提示框

        //捕获阶段和冒泡阶段只能进行一个，所以注释了捕获阶段
        
        //冒泡阶段  son -> father -> body -> html -> document
        son.addEventListener('click',function(){
            alert('son');
        },false);
        father.addEventListener('click',function(){
            alert('father');
        },false);
        //点击son盒子，会先弹出son提示框，然后再弹出father提示框
    </script>
</body>

捕获阶段程序运行，点击son，先弹出father再弹出son

在这里插入图片描述

冒泡阶段，先弹出son，再弹出father

在这里插入图片描述

有些事件是没有冒泡的，例如：onblur,onfocus,onmouseenter,onmouseleave

阻止事件冒泡

标准写法：利用事件对象里面的stopPropagation()方法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件流</title>

    <style>
        .father{
            width: 500px;
            height: 500px;
            margin: auto;
            background-color: blue;
        }
        .son{
            width: 200px;
            height: 200px;
            margin: auto;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son盒子 </div>
    </div>
    
    <script>
    	var son = document.querySelector('.son');
        var father = document.querySelector('.father');
        
        //冒泡阶段  son -> father -> body -> html -> document
        son.addEventListener('click',function(e){
            alert('son');
            e.stopPropagation();//阻止冒泡
            //e.cancelBubble = true;阻止冒泡，IE6/7/8使用的方法。
        },false);
        father.addEventListener('click',function(){
            alert('father');
        },false);
        document.addEventListener('click',function(){
            alert('document');
        },false)
        //点击son盒子，只弹出son提示框
    </script>
</body>
</html>