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

阳光穿透心脏的1/2处 2022-12-23 15:23 247阅读 0赞

# 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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 3]  
有些事件是没有冒泡的，例如：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>

通过方法stopPropagation()阻止冒泡。  
非准写法：利用事件对象cancelBubble属性。  
上述程序在son后阻止冒泡，但是如果点击father盒子，则会弹出father提示框，点击确定，接着会弹出document对话框。并没有阻止后面的冒泡。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/2fe5400962a64b45a21c17d801287249.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/1639f9eab6c04346a6ee5bb9d7bc9c73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/9a77795abe6d4844a82067e256d4f3e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/3ee56990a68d46b8a964e5627195e771.png