Retourner à la page d'accueil de TJS

Propriété : Event.bubbles

          

Booléen qui indique si l'événement remonte dans le DOM, à l'image d'une bulle dans l'eau

Syntaxe
Boolean myEvent.bubbles

Description
Ce booléen indique si l'événement myEvent remonte, comme une bulle d'air dans de l'eau, sur chaque noeud du DOM.
Cette remontée peut être arrêtée par stopPropagation().


Exemple Exemple d'event qui bubbles
Code source
<div id="niveau1" class="captureClick">
 <div id="niveau2">
   <div id="niveau3">
     <div id="btn1" class="btn radius btn-outline cursor-pointer">Cliquez moi : le click remonte jusqu'au div#niveau1</div>
     <div id="btn2" class="btn radius btn-outline cursor-pointer">Cliquez moi : le click s'arrête</div>
   </div>
 </div>
</div>
<script>
 /* Gestionnaire d'événement sur le div de niveau supérieur */
 document.querySelector("div.captureClick").addEventListener("click", function(myEvent) {
   console.log("Gestionnaire de clic sur le niveau supérieur depuis div="+myEvent.target.getAttribute("id"));
 });

 /* Gestionnaire d'événement sur les boutons */
 document.querySelector("div#btn1").addEventListener("click", function(myEvent) {
   console.log("Clic sur btn1");
 });
 document.querySelector("div#btn2").addEventListener("click", function(myEvent) {
   console.log("Clic sur btn2 avec stopPropagation()");
   myEvent.stopPropagation();
 });

 
 
</script>

Résultat
Cliquez moi : le click remonte jusqu'au div#niveau1
Cliquez moi : le click s'arrête
Emulation de la console
Explication
Un div à plusieurs niveaux de profondeur est cliqué.
On remarque que l'événement clic remonte de niveau en niveau sur le clic du div#btn1
Tandis que l'événement est stoppé sur le div#btn2
Page mise à jour le

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 24/11/2017 06:47:51 sur php7 en 19.74 ms