Explication détaillée des exemples de bouillonnement d'événements et de capture d'événements

Diagramme schématique du flux d'événements JS :

À partir de là, nous pouvons savoir qu'un flux d'événements JS complet commence à partir de la fenêtre et se termine par Un processus de retour à la fenêtre ; le flux d'événements est divisé en trois étapes : processus de capture (1~5), processus cible (5~6), processus de bouillonnement (6~10) ; En fait, le processus de capture et le processus de bouillonnement sont des processus complètement opposés, c'est-à-dire le processus d'événements se propageant des éléments parents aux éléments enfants et des éléments enfants aux éléments parents.

Capture d'événement

La capture d'événement ne peut être réalisée que dans la deuxième forme de liaison d'événement,

La deuxième forme de liaison d'événement Dans dans l'exemple ci-dessus,

, lorsque l'on clique sur div3, div1 recevra deux événements de clic. L'un est l'événement de clic de div1 qui est déclenché dans le. phase de capture, et l'autre est l'événement de clic de div1 qui est déclenché dans la phase de bouillonnement ; le troisième paramètre dans addEventListener : true-- --capture, false-----bubble défini sur true ci-dessus, c'est-à-dire le l'événement de clic dans la phase de capture est déclenché

nbsp;html><meta><title>事件捕获</title><style>div{padding:40px;}#div1{background: red;}#div2{background:green;}#div3{background: blue;}</style><script>window.onload=function(){var oDiv1=document.getElementById(&#39;div1&#39;);var oDiv2=document.getElementById(&#39;div2&#39;);var oDiv3=document.getElementById(&#39;div3&#39;);function fn1(){
                alert(this.id);
            }//点击div3部分时，分别弹出div1，div2，div3            oDiv1.addEventListener(&#39;click&#39;,fn1,true);//为true时，是事件捕获   false=冒泡            oDiv2.addEventListener(&#39;click&#39;,fn1,true);
            oDiv3.addEventListener(&#39;click&#39;,fn1,true);
        }</script><div><div><div></div></div></div>

Remarque : div1 recevra deux événements de clic et si le déclenchement de cet événement n'a rien à voir avec

Autre exemple :

Cliquez sur div3 et affichez les résultats contextuels : 3, 2, 1

nbsp;html><meta><title>事件捕获</title><style>div{padding:40px;}#div1{background: red;}#div2{background:green;}#div3{background: blue;}</style><script>window.onload=function(){var oDiv1=document.getElementById(&#39;div1&#39;);var oDiv2=document.getElementById(&#39;div2&#39;);var oDiv3=document.getElementById(&#39;div3&#39;);                    
            oDiv1.addEventListener(&#39;click&#39;,function(){
                alert(1);
            },false);
            oDiv1.addEventListener(&#39;click&#39;,function(){
                alert(3);
            },true);
            oDiv3.addEventListener(&#39;click&#39;,function(){
                alert(2);
            },false);//点击div3，分别弹出3,2,1        }</script><div><div><div></div></div></div>

Lorsque vous cliquez sur div3, div1 recevra deux événements de clic. Pendant la phase de capture (true), l'événement de clic de div1 est déclenché, et le pop-. le résultat du pop-up est : 3 ; dans la phase de bouillonnement, l'événement de clic de div3 est déclenché et le résultat du pop-up est : 2, puis l'événement de clic de div1 est déclenché et le résultat du pop-up est : 1

Evénement bouillonnant

Lorsqu'un élément reçoit un événement, il propagera tous les événements qu'il reçoit vers son parent, jusqu'en haut- fenêtre de niveau. Appelé mécanisme de bouillonnement d'événement ;

Exemple :

Empêcher le bouillonnement : appelez event.cancelBubble=true dans la fonction d'événement en cours pour empêcher le bouillonnement ;

nbsp;html><meta><title>事件冒泡</title><style>div{padding:40px;}   #div1{   background: red;   }   #div2{   background:green;   }#div3{background: blue;}</style><script>window.onload=function(){var oDiv1=document.getElementById(&#39;div1&#39;);var oDiv2=document.getElementById(&#39;div2&#39;);var oDiv3=document.getElementById(&#39;div3&#39;);function fn1(){
                alert(this.id);
            }//事件函数绑定            oDiv1.onclick=fn1;//告诉div1，如果它接收到了一个点击事件，那它就去执行fn1            oDiv2.onclick=fn1;
            oDiv3.onclick=fn1;//div3,div1 事件冒泡        }</script><div><div><div></div></div></div>

Pour comparer l'effet lorsque l'événement bouillonnant n'est pas annulé, ce qui suit utilise un retardateur pour observer l'effet

nbsp;html><meta><title>阻止冒泡</title><style>#div1{width:100px;height:200px;border:1px solid red;display: none;}</style><script>window.onload=function(){var oBtn=document.getElementById(&#39;btn1&#39;);var oDiv=document.getElementById(&#39;div1&#39;);

            oBtn.onclick=function(ev){var oEvent=ev||event;//阻止当前事件函数事件冒泡                oEvent.cancelBubble=true;
                oDiv.style.display=&#39;block&#39;;
            }
            document.onclick=function(){               /* setTimeout(function(){//观察事件冒泡：div出现一秒钟后隐藏了
                    oDiv.style.display=&#39;none&#39;;
                },1000);*/oDiv.style.display=&#39;none&#39;;
            }
        }</script><input><div>点击按钮div就出现，点击除按钮以外的部分div就消失</div>

Utilisation du bouillonnement d'événements

Les fonctions suivantes sont courantes dans un site Web - Partager sur

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!