Ejercicio 4

clase-9.js

@@ -87,3 +87,58 @@ lista3.addEventListener("click", (evento) => {
    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.
 */
+
+// bubbling:
+
+const externoBub = document.getElementById("externoBub");
+const internoBub = document.getElementById("internoBub");
+const botonBub = document.getElementById("botonBub");
+
+externoBub.addEventListener("click", () => {
+    console.log("DIV EXTERNO");
+});
+
+internoBub.addEventListener("click", () => {
+    console.log("DIV INTERNO");
+});
+
+botonBub.addEventListener("click", () => {
+    console.log("BOTON");
+});
+
+// Capturing
+
+
+const externoCap = document.getElementById("externoCap");
+const internoCap = document.getElementById("internoCap");
+const botonCap = document.getElementById("botonCap");
+
+externoCap.addEventListener("click", () => {
+    console.log("DIV EXTERNO");
+}, true);
+
+internoCap.addEventListener("click", () => {
+    console.log("DIV INTERNO");
+}, true);
+
+botonCap.addEventListener("click", () => {
+    console.log("BOTON");
+}, true);
+
+/*
+
+5. Crear un formulario con los campos nombre, edad y mensaje (textarea). Al
+   enviarlo:
+
+   - Verificar que ningún campo esté vacío.
+   - Verificar que la edad sea un número entero positivo, menor que 120.
+   - Si hay errores, mostrarlos en la página junto al campo correspondiente.
+   - Si todo es válido, mostrar un mensaje de éxito y limpiar el formulario.
+
+   Para limpiar un campo se puede asignar un string vacío a su propiedad
+   `value`:
+
+   ```js
+   document.querySelector("#nombre").value = "";
+   ```
+*/

index.html

@@ -33,7 +33,16 @@
         </div>
         <hr>
         <div id="ejercicio-4">
-            <!-- Agregar acá el código HTML que haga falta para el ejercicio 4 -->
+            <div id="externoBub">
+                <div id="internoBub">
+                <button id="botonBub">Click Bubbling</button>
+            </div>
+                </div>
+             <div id="externoCap">
+                <div id="internoCap">
+                <button id="botonCap">Click Capturing</button>
+            </div>
+                </div>
         </div>
         <hr>
         <div id="ejercicio-5">