什么是事件传播、捕获、冒泡？

在本文中，我们将了解事件传播、捕获和冒泡。

事件传播确定元素接收事件的顺序。 HTML DOM 的这种事件传播顺序有两种处理方式，即事件冒泡和事件捕获。

例如，假设有三个组件，即component1 、 component2 、 component3 。在这些组件中，我们附加了onClickEventListener事件处理程序。现在，当我们单击component3时，将执行所有三个组件的事件处理程序。现在这里的问题是事件将按什么顺序执行。现在，事件冒泡和捕获进入画面。

1. 冒泡：当一个事件发生在一个组件上时，它首先在它上面运行事件处理程序，然后在它的父组件上，然后一直到其他祖先的组件上。默认情况下，所有事件处理都按照从中心组件事件到最外层组件事件的顺序进行。

示例：在此示例中，我们将创建三个 div 组件，每个组件都有一个事件处理程序。当我们点击组件 3 时，它会提示“组件 3 事件被点击” 然后一直显示“组件 2 事件被点击”和“组件 1 事件被点击”警报。这就是事件冒泡从“下到上”发生的方式。

HTML

  

    
        #div1 {
            background-color: lightgreen;
            padding: 24px;
            border: 1px solid black;
        }
  
        #div2 {
            background-color: yellow;
            padding: 18px;
            border: 1px solid black;
  
        }
  
        #div3 {
            background-color: orange;
            border: 1px solid black;
        }
    

  

    GeeksForGeeks
    What is Event propagation, capturing, bubbling?
  
    
        Component 1
        
            component 2
            
                component 3
            
        
    
  
    
    
        let div1 = document.querySelector("#div1");
        let div2 = document.querySelector("#div2");
        let div3 = document.querySelector("#div3");
  
        div1.addEventListener("click", function (event) {
            alert("Component 1 event clicked");
        });
  
        div2.addEventListener("click", function (event) {
            alert("Component 2 event clicked");
        });
  
        div3.addEventListener("click", function (event) {
            alert("Component 3 event clicked");
        });
    

  

输出：

2.捕获：与冒泡相反。事件处理程序首先位于其父组件上，然后位于实际想要触发该事件处理程序的组件上。简而言之，这意味着事件首先被最外层的元素捕获，然后传播到最内层的元素。它也被称为涓滴。

示例：在此示例中，我们将创建三个 div 组件，每个组件都有一个事件处理程序。当我们点击 div 组件 3 事件时，它会发出“组件 1 事件被点击”的警报，然后一路向下“组件 2 事件被点击”，然后“组件 3 事件被点击”警报会显示。这就是事件捕获或涓涓从“上到下”发生的方式。

HTML

  

    
        #div1 {
            background-color: lightgreen;
            padding: 24px;
            border: 1px solid black;
        }
  
        #div2 {
            background-color: yellow;
            padding: 18px;
            border: 1px solid black;
  
        }
  
        #div3 {
            background-color: orange;
            border: 1px solid black;
        }
    

  

    GeeksForGeeks
    What is Event propagation, capturing, bubbling?
  
    
        Component 1
        
            component 2
            
                component 3
            
        
    
  
    
    
        let div1 = document.querySelector("#div1");
        let div2 = document.querySelector("#div2");
        let div3 = document.querySelector("#div3");
  
        div1.addEventListener("click", function (event) {
            alert("Component 1 event clicked");
        }, true);
  
        div2.addEventListener("click", function (event) {
            alert("Component 2 event clicked");
        }, true);
  
        div3.addEventListener("click", function (event) {
            alert("Component 3 event clicked");
        }, true);
    

  

输出：