clase-9.js

@@ -39,4 +39,38 @@ lista.addEventListener("click", function(event) {
         event.target.classList.add("seleccionado");
         console.log(event.target.textContent);
     }
-});
+});
+
+
+
+//Ejercicio 4 de la clase 9
+//Fase de Bubbling
+const externo1 = document.querySelector("#externo");
+externo1.addEventListener("click", function() {
+    console.log("externo");
+});
+
+const interno1 = document.querySelector("#interno");
+interno1.addEventListener("click", function() {
+    console.log("interno");
+});
+
+const boton1 = document.querySelector("#botón");
+boton1.addEventListener("click", function() {
+    console.log("botón");
+});
+//Se visualiza en consola como:
+//botón
+//interno
+//externo
+
+
+//Fase de Capturing solamente en #externo
+externo1.addEventListener("click", function() {
+    console.log("externo - capturing");
+}, true);
+//Se visualiza en consola como:
+//externo - capturing
+//botón
+//interno
+//externo

index.html

@@ -33,6 +33,11 @@
         <hr>
         <div id="ejercicio-4">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+             <div id="externo">
+                <div id="interno">
+                    <button id="botón">Click</button>
+                </div>
+             </div>
         </div>
         <hr>
         <div id="ejercicio-5">