Ejercicio 4

clase-9.js

@@ -50,3 +50,31 @@ lista.addEventListener("click", function (e) {
         e.target.classList.add("seleccionado");
     }
 });
+
+//EJERCICIO 4
+
+// 1. Selecciono los tres elementos del DOM utilizando sus IDs y etiquetas
+const externo = document.querySelector("#externo");
+const interno = document.querySelector("#interno");
+const botonej4 = document.querySelector("#boton-ej4");
+
+// 2. Registro de un listener en fase de Capturing (Descenso). Al pasar 'true' como tercer argumento, este código se ejecuta primero,
+// cuando el evento baja desde la raíz del DOM hacia el botón.
+externo.addEventListener("click", function () {
+    console.log("externo capturing");
+}, true);
+
+// 3. Registro de listeners en fase de Bubbling (Ascenso)
+// Estos listeners no tienen un tercer argumento (o es 'false' por defecto),
+// por lo que se ejecutan cuando el evento sube desde el elemento origen.
+botonej4.addEventListener("click", function () {
+    console.log("boton");
+});
+
+interno.addEventListener("click", function () {
+    console.log("interno");
+});
+
+externo.addEventListener("click", function () {
+    console.log("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="boton-ej4">Click</button>
+                </div>
+            </div>
         </div>
         <hr>
         <div id="ejercicio-5">