Flux d'événements DOM et méthodes pour empêcher la propagation des événements

Flux d'événements DOM

La structure DOM (Document Object Model) est une structure arborescente. Lorsqu'un élément HTML génère un événement, l'événement sera propagé le long du chemin entre le nœud de l'élément et le nœud racine, et tous les nœuds traversés par le chemin recevront l'événement Ce processus de propagation peut être appelé flux d'événements DOM.

Dans les navigateurs compatibles DOM, le flux d'événements est divisé en 3 phases

• Phase de capture : la phase dans laquelle l'événement se propage du nœud Document au nœud cible de haut en bas.
• Phase cible : l'événement atteint l'élément cible et le nœud cible réel traite l'événement.
• Étape de bouillonnement : étape dans laquelle l'événement se propage du nœud cible au nœud Document de bas en haut.

Remarque : Le processus de propagation de l'événement peut être arrêté en appelant la méthode stopPropagation de l'événement à n'importe quel point de l'ensemble du flux d'événements.

Quand déclencher l'événement

Qu'un événement d'élément soit déclenché dans la phase de bouillonnement ou dans la phase de capture, selon la manière dont l'événement est ajouté, le moment du déclenchement de l'événement est également différent.

• Capture d'événement : déclenche l'exécution lors de la phase de capture d'événement
• Bubbling event : déclencher l'exécution pendant la phase de bouillonnement de l'événement

1. Événements liés directement dans les balises html

   Cet événement se déclenche pendant la phase de bouillonnement

   Par exemple , cliquez sur l'élément .son, sortez d'abord "fils" sur la console, puis sortez "père".

   <div class="father" onclick="logFather('father', event)">
       <div class="son" onclick="logSon('son', event)"></div>
   </div>
   <script>
       function logFather(str,event) {
         
         
           console.log(str)
       }
       function logSon(str,event) {
         
         
           console.log(str)
           //event.stopPropagation();//阻止冒泡方式一
           //event.cancelBubble = true;//阻止冒泡方式二
           //阻止冒泡后，点击.son元素时，控制台只输出“son”，不触发父元素的点击事件
       }
   </script>
   

2. Événements expédiés avec js

   Cet événement se déclenche pendant la phase de bouillonnement

   <div id="father" style="height: 100px;background-color: rgb(255, 164, 164);">
       <div id="son" style="width:50px;height: 50px;background-color: rgb(255, 248, 151);"></div>
   </div>
   <script>
       let father = document.getElementById("father"),
           son = document.getElementById("son");
       father.onclick = function(event){
           
           
           console.log('father');
       }
       son.onclick = function(event){
           
           
           console.log('son');
           // event.stopPropagation();//阻止冒泡方式一
           // event.cancelBubble = true;//阻止冒泡方式二
       }
   </script>
   

3. Événements liés avec addEventListener()

   Ce type d'événement peut être spécifié à quelle étape se déclencher

   addEventListener( event , function , * useCapture* ); Le troisième paramètre "useCapture" est utilisé pour déterminer quand l'événement est déclenché, et la valeur du paramètre est booléenne

   true : l'événement se déclenche pendant la phase de capture

   false : l'événement se déclenche pendant la phase de bouillonnement

   Non défini : l'événement est déclenché dans la phase de bouillonnement par défaut

   <div id="myDiv" style="background-color: coral;padding: 20px;">
       <p id="myP" style="background-color: rgb(255, 255, 255);padding: 10px;">点击段落，我是冒泡。</p>
   </div>
   <div id="myDiv2" style="background-color: rgb(194, 255, 80);padding: 20px;">
       <p id="myP2" style="background-color: rgb(255, 255, 255);padding: 10px;">点击段落，我是捕获。 </p>
   </div>
   <script>
       document.getElementById("myP").addEventListener("click", function () {
           
           
           alert("你点击了 P 元素!");//点击 #myP 元素时先弹出
           //event.stopPropagation();//阻止冒泡方式一
           //event.cancelBubble = true;//阻止冒泡方式二
       }, false);
       document.getElementById("myDiv").addEventListener("click", function () {
           
           
           alert(" 你点击了 DIV 元素 !");//点击 #myP 元素时后弹出
       }, false);
       document.getElementById("myP2").addEventListener("click", function () {
           
           
           alert("你点击了 P2 元素!");//点击 #myP2 元素时后弹出
       }, true);
       document.getElementById("myDiv2").addEventListener("click", function (event) {
           
           
           alert("你点击了 DIV2 元素 !");//点击 #myP2 元素时先弹出
           // event.stopPropagation(); //也可以阻止事件继续被捕获，添加后事件不再继续传播
           // event.cancelBubble = true;//也可以阻止事件继续被捕获，添加后事件不再继续传播
       }, true);
   </script>