Javascript中的事件泡制和捕获

xcvxvxc
58 阅读3分钟

简介

在Javascript中，你一定和事件打过交道。在这篇博客中，我们将介绍Javascript中与事件有关的两个重要概念，即事件冒泡和事件捕获。这两个概念都与事件的传播有关，我们称之为事件流。

所以，让我们来理解这些概念。

冒泡

事件冒泡是调用事件处理程序的顺序的概念，其中事件处理程序被嵌套在另一个元素中。事件的顺序是从最内层的元素开始，沿途覆盖所有的祖先。为了更好地理解它，让我们看看这个例子。

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width">  
  <title>Event Bubbling</title>  
</head>  
<body> 
 <div id="parent1">  
    <button id="btn1">Click</button>  
  </div>  
    
  <script>  
    var parent = document.querySelector('#parent1');  
      parent.addEventListener('click', event=> {  
        console.log("calling event of Parent");  
      });  
  
   var child = document.querySelector('#btn1');  
      child.addEventListener('click', event => {  
        console.log("calling event of Child");  
      });  
  </script>  
</body>  
</html>

在这里，我们有一个简单的HTML文件，其中我们在正文中的一个div内添加了一个按钮。我们为它们提供了ID，以便为它们添加一个事件监听器。在脚本标签中，我们首先在querySelector的帮助下查询该元素，并将其存储在一个变量中。然后，在持有该元素的变量上，我们在点击事件上添加事件监听器。

在事件监听器中，我们只是做了一些简单的控制台语句，以了解点击按钮后调用事件处理程序的顺序。因此，当我们点击按钮并检查控制台时，我们可以看到控制台语句。对于上面的代码，输出将如下。

调用孩子的事件

调用父母的事件

首先，最内层的事件被调用，然后父层的事件被调用。这就是事件冒泡的工作方式。它首先会调用最深嵌套元素的事件监听器，然后是其父级元素，依此类推。

停止冒泡

你也可以在事件处理程序的帮助下，在事件被完全处理后停止这个事件冒泡。也就是说，如果我们不想运行父级事件处理程序，只想运行嵌套元素的事件处理程序，那么我们可以停止冒泡。为了停止冒泡的过程，我们使用event.stopPropagation方法。

下面是我们如何停止它。在同一个HTML文件中，我们可以像这样修改按钮事件监听器。

 var child = document.querySelector('#btn1');  
      child.addEventListener('click', event => {  
      event.stopPropagation();
        console.log("calling event of Child");  
      });

你可以看到，除了添加event.stopPropagation方法外，事件处理程序中的一切都相同。现在当你点击按钮时，你会注意到在这种情况下，父事件并没有被调用。所以，这就是我们如何停止它。

捕获

事件捕获是与Event Bubbling相反的。它是调用事件处理程序的顺序的概念，其中事件处理程序嵌套在另一个元素中，事件的顺序是从最外层的元素开始，覆盖所有沿途的内部元素。事件捕获（Event Capturing）很少使用，因为事件冒泡（Event bubbling）更适合于处理事件流。

现在，以这种方式修改脚本标签，注意事件序列的变化。

 <script>  
    var parent = document.querySelector('#parent1');  
      parent.addEventListener('click', event=> {  
        console.log("calling event of Parent");  
      },true);  
  
   var child = document.querySelector('#btn1');  
      child.addEventListener('click', event => {  
        console.log("calling event of Child");  
      });  
  </script>

这里我们添加了另一个参数为true。默认情况下，它是假的，当你想打开事件捕获时，在这种情况下，你需要把它设置为真，输出将如下。

调用父母的事件

调用子女的事件

总结

所以，我们现在已经学会了什么是javascript中的事件冒泡和事件捕获，以及我们如何实现它。事件冒泡是指事件处理程序从最里面的元素到最上面的元素被执行的阶段，而在事件捕获中则相反。

avatar
文章
阅读
粉丝