Analyse approfondie du principe de bouillonnement d'événements JS : explication détaillée du bouillonnement d'événements

Explication détaillée des événements bouillonnants JS : pour comprendre le principe du bouillonnement d'événements en profondeur, des exemples de code spécifiques sont nécessaires

Le bouillonnement d'événements est un concept important en JavaScript et il joue un rôle important dans les navigateurs. En comprenant le principe de la propagation des événements, nous pouvons mieux comprendre le processus de propagation des événements dans l'arborescence DOM, puis gérer les événements de manière flexible.

1. Le principe du bouillonnement d'événements
Le bouillonnement d'événements signifie que lorsqu'un élément de l'arborescence DOM déclenche un événement, l'événement sera propagé aux éléments supérieurs dans l'ordre de l'arrière vers l'avant. Pour faire simple, l’événement partira de l’élément déclencheur et se propagera aux éléments supérieurs couche par couche jusqu’à l’élément racine.

Par exemple, supposons que nous ayons la structure HTML suivante :

<div id="grandparent" onclick="console.log('grandparent clicked')">
  <div id="parent" onclick="console.log('parent clicked')">
    <div id="child" onclick="console.log('child clicked')">
      点击我
    </div>
  </div>
</div>

Lorsque nous cliquons sur l'élément div avec "id as child", l'événement déclenchera d'abord "enfant cliqué", puis continuera à remonter jusqu'au "parent". ", déclenchant "le parent a cliqué", et enfin des bulles vers l'élément "grand-parent", déclenchant le "grand-parent cliqué".

2. Exemple de code
Ce qui suit est un exemple de code spécifique qui démontre le processus de bouillonnement d'événements :

<div id="grandparent" onclick="console.log('grandparent clicked')">
  <div id="parent" onclick="console.log('parent clicked')">
    <div id="child" onclick="console.log('child clicked')">
      点击我
    </div>
  </div>
</div>

<script>
  // 获取DOM元素
  var grandparent = document.getElementById('grandparent');
  var parent = document.getElementById('parent');
  var child = document.getElementById('child');

  // 给child元素绑定事件监听器
  child.addEventListener('click', function(event) {
    console.log('child clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });

  // 给parent元素绑定事件监听器
  parent.addEventListener('click', function(event) {
    console.log('parent clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });

  // 给grandparent元素绑定事件监听器
  grandparent.addEventListener('click', function(event) {
    console.log('grandparent clicked');
    event.stopPropagation(); // 阻止事件继续向上级元素冒泡
  });
</script>

Dans le code ci-dessus, nous lions respectivement les trois éléments "grand-parent", "parent" et "enfant". auditeur. Lorsque l'on clique sur l'élément « enfant », « enfant cliqué », « parent cliqué » et « grand-parent cliqué » sont affichés en séquence.

De plus, nous utilisons la méthode event.stopPropagation() pour empêcher les événements de remonter jusqu'aux éléments supérieurs. Si vous n'utilisez pas cette méthode, l'événement remontera jusqu'à l'élément racine. event.stopPropagation()方法来阻止事件继续向上级元素冒泡。如果不使用该方法，事件将会一直冒泡到根元素。

三、事件代理
除了上述方式外，还可以通过事件代理的方式来处理冒泡事件。通过将事件监听器绑定到上级元素（如父元素）上，来代替给每个子元素都绑定监听器。

代码示例如下：

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
  <div id="child3">子元素3</div>
</div>

<script>
  // 获取parent元素
  var parent = document.getElementById('parent');

  // 通过事件代理，给parent元素绑定点击事件监听器
  parent.addEventListener('click', function(event) {
    var target = event.target;
    var id = target.id;
    console.log('子元素' + id + '被点击');
  });
</script>

在上述代码中，我们通过事件代理的方式，给父元素"parent"绑定点击事件监听器。当点击父元素的任何子元素时，都会触发事件监听器，并通过event.target

En plus des méthodes ci-dessus, les événements bouillonnants peuvent également être gérés via un proxy d'événement. En liant les écouteurs d'événements aux éléments de niveau supérieur (tels que les éléments parents), au lieu de lier les écouteurs d'événements à chaque élément enfant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!