ejercicio4

clase-9.js

@@ -50,7 +50,6 @@ ulPaises.addEventListener('click', (e) => {
 
 })
 
-
 // 4 Agregar a la página los siguientes elementos:
 // <div id="externo">
 //     <div id="interno">
@@ -58,7 +57,29 @@ ulPaises.addEventListener('click', (e) => {
 //     </div>
 // </div>
 
-// Registrar listeners de bubbling en los tres elementos y verificar en consola el orden en que se ejecutan al hacer clic en el botón. Luego, agregar un listener de capturing en #externo y observar cómo cambia el orden.
+// Registrar listeners de bubbling en los tres elementos y verificar 
+// en consola el orden en que se ejecutan al hacer clic en el botón. 
+// Luego, agregar un listener de capturing en #externo y observar cómo cambia el orden.
+
+
+let divExterno = document.querySelector('#externo');
+let divInterno = document.querySelector('#interno');
+let boton = document.querySelector('#boton');
+
+divExterno.addEventListener('click' , () =>{
+    console.log('externo (primero)')
+}, true);
+
+divInterno.addEventListener('click' , () =>{
+    console.log('Interno (tercero)')
+});
+
+boton.addEventListener('click' , () =>{
+    console.log('boton (segundo)')
+});
+
+// con el tercer argumento true en el listener del div externo el orden queda asi:
+// 1ro - divExterno / 2do - boton / 3ro - divInterno /
 
 
 

index.html

@@ -35,6 +35,12 @@
         <hr>
         <div id="ejercicio-4">
             <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+             <p>Capturing y bubbling</p>
+            <div id="externo">
+                <div id="interno">
+                    <button id="boton">Click</button>
+                </div>
+            </div>
         </div>
         <hr>
         <div id="ejercicio-5">