什么是 JavaScript 中的事件冒泡和事件捕获？

事件冒泡和事件捕获是 JavaScript 的两个有趣概念。在深入研究这些引人入胜的概念之前，让我们先了解一下什么是事件侦听器？事件侦听器基本上是一个等待事件发生的函数。该事件可以是鼠标单击事件、提交表单、按下键盘按键等。

事件侦听器包含三个参数，可以使用以下语法进行定义。

.addEventListener(, 
    , {capture : boolean});

• ：事件侦听器附加到的元素。
• <事件名称>： 它可以是“点击”、“按键向上”、“按键向下”等事件。
• ：该函数在事件发生后触发。
• {capture: boolean}：它告诉事件是处于捕获阶段还是冒泡阶段（可选）

例1：我们举个例子来理解事件冒泡和事件捕获。

HTML

  

    
    
    
        div {
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h2 {
            color: black;
        }
        #grandparent {
            background-color: green;
            width: 300px;
            height: 300px;
        }
        #parent {
            background-color: blue;
            width: 200px;
            height: 200px;
        }
        #child {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    

  

    
        Welcome To GFG
        GrandParent
            Parent
                Child
            
        
    
  
    
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");
  
        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent");
        }, { capture: false });
        parent.addEventListener("click", (e) => {
            console.log("Parent");
        }, { capture: false });
        child.addEventListener("click", (e) => {
            console.log("Child");
        }, { capture: false });
    

输出：

当我们点击带有孩子作为其 ID 的 div 时，我们应该在控制台上获得作为“孩子”的输出。但出乎意料的是，即使我们没有点击以父代和祖父代为 ID 的 div，我们也会收到不同的输出。事件冒泡的概念出现了。子 div 位于父 div 和祖父 div 中。所以，当子 div 点击时，我们间接点击了父 div 和祖父 div。因此，传播正在 DOM 中从内向外移动，或者我们可以说事件正在冒泡。

因此，DOM（Document Object Modal）中从最近元素传播到最远元素的过程称为事件冒泡。

示例 2：在上面的示例中，让我们更改addEventListener()的第三个参数的值，并查看输出中将进行哪些更改。

HTML

     
    
        div {
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h2 {
            color: black;
        }
        #grandparent {
            background-color: green;
            width: 300px;
            height: 300px;
        }
        #parent {
            background-color: blue;
            width: 200px;
            height: 200px;
        }
        #child {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    

  

    
        Welcome To GFG
        GrandParent
            Parent
                 Child
            
        
    
    
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");
          
        // Changing value of capture parameter as 'true'
        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent");
        }, { capture: true });
        parent.addEventListener("click", (e) => {
            console.log("Parent");
        }, { capture: true });
        child.addEventListener("click", (e) => {
            console.log("Child");
        }, { capture: true });
    

  

很明显，子 div的祖先 div首先打印，然后是子 div本身。因此，从 DOM 中最远的元素传播到最接近的元素的过程称为事件捕获。这两个术语正好相反。

示例 3：让我们更多地使用代码以更好地理解。

HTML

  
   
    
        div {
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h2 {
            color: black;
        }
        #grandparent {
            background-color: green;
            width: 300px;
            height: 300px;
        }
        #parent {
            background-color: blue;
            width: 200px;
            height: 200px;
        }
        #child {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    

  

    
        Welcome To GFG
        GrandParent
            Parent
                 Child
            
        
    
  
    
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");
          
        document.addEventListener("click", (e) => {
            console.log("Document capturing");
        }, { capture: true });
          
        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent capturing");
        }, { capture: true });
          
        parent.addEventListener("click", (e) => {
            console.log("Parent capturing");
        }, { capture: true });
          
        child.addEventListener("click", (e) => {
            console.log("Child capturing");
        }, { capture: true });
          document.addEventListener("click", (e) => {
            console.log("Document bubbling");
        }, { capture: false });
          
        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent bubbling");
        }, { capture: false });
          
        parent.addEventListener("click", (e) => {
            console.log("Parent bubbling");
        }, { capture: false });
          
        child.addEventListener("click", (e) => {
            console.log("Child bubbling");
        }, { capture: false });
    

  

输出：如果我们点击 id 为 child 的 div，那么这将是输出。

我们可以看到事件监听器的事件捕获首先发生，然后事件冒泡发生。这意味着事件侦听器的传播首先在 DOM 中从外到内，然后从内到外。

如何停止事件冒泡和事件捕获？

在上面的例子中，我们可以在 addEventListener() 的回调函数中看到一个参数“e”（有时也称为“事件”）。它是一个事件对象，它自动定义我们何时向元素添加事件侦听器。这个对象“e”有一个名为 stopPropagation() 的函数，它有助于防止这种烦人的行为。

示例 4：让我们看看当我们在下面的代码中单击子 div时会发生什么。

HTML

  

    
        div {
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        h2 {
            color: black;
        }
        #grandparent {
            background-color: green;
            width: 300px;
            height: 300px;
        }
        #parent {
            background-color: blue;
            width: 200px;
            height: 200px;
        }
        #child {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    

  

    
        Welcome To GFG
        GrandParent
            Parent
                 Child
            
        
    
  
    
        const grandParent = document.getElementById("grandparent");
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");
        grandParent.addEventListener("click", (e) => {
            console.log("GrandParent bubbling");
        });
        parent.addEventListener("click", (e) => {
            e.stopPropagation();  //syntax to stop event bubbling
            console.log("Parent bubbling");
        });
        child.addEventListener("click", (e) => {
            console.log("Child bubbling");
        });
    

  

输出：

如果我们单击子 div ，则传播将在父 div上停止并且不会移动到祖父div 。因此，防止了事件冒泡。

注意：也可以使用相同的方式阻止事件捕获。

要记住的要点：

• 如果我们没有在addEventListener() 中提及任何第三个参数，那么默认情况下会发生事件冒泡。
• 事件冒泡和事件捕获仅在元素及其所有祖先具有相同的事件侦听器（在我们的例子中，’click’ 事件）附加到它们时发生。

结论：我们已经了解了事件冒泡和事件捕获，这些是一些关键点。

• 事件捕获意味着事件的传播是从 DOM 中的祖先元素到子元素完成的，而事件捕获意味着传播是从 DOM 中的子元素到祖先元素完成的。
• 事件捕获发生在事件冒泡之后。
• 如果 {capture: true} ，将发生事件捕获，否则将发生事件冒泡。
• 两者都可以通过使用stopPropagation()方法来防止。