Retourner à la page d'accueil de TJS

Script bubble : Remontée d'événement dans le DOM

Les événements remontent comme des bulles dans les éléments de niveau supérieur du DOM
Partie II : L'interactivité / Chapitre 11 : La programmation événementielle / Page 154

Exécution du script

Emulation de la console

Code source

<html><head>    <title>Propagation d'événements dans le DOM</title>    <style type="text/css">        div#container {            padding:15px;            border:1px solid #999;                    }        div#container div {            padding:5px;            margin:5px;            display:inline-block;            border:1px solid #999;                    font-size:20px;            cursor: pointer;        }     </style></head><body>    <h1>Cliquez sur les 2 div et observez la propagation de l'événement</h1>    <div id="container">        <div id="click1">Cliquez sur div#click1</div>        <div id="click2">Cliquez sur div#click2</div>    </div></body>    <script type="text/javascript">        var container=document.getElementById("container");        var click1=document.getElementById("click1");        var click2=document.getElementById("click2");        document.body.addEventListener("click", function(evt) {console.log("Listener de body")});        container.addEventListener("click", function(evt) {console.log("Listener de container")});        click1.addEventListener("click", clickDiv1);        click2.addEventListener("click", clickDiv2);                function clickDiv1(e) {            console.log("Click1 : bubbles="+e.bubbles+" cancelBubble="+e.cancelBubble);        }        function clickDiv2(e) {            e.stopPropagation();            console.log("Click2 : bubbles="+e.bubbles+" cancelBubble="+e.cancelBubble);        }    </script></html>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 22/10/2019 05:51:49 sur php7 en 27.55 ms