diff --git a/clase-9.js b/clase-9.js index e04fd24..684cd65 100644 --- a/clase-9.js +++ b/clase-9.js @@ -86,4 +86,59 @@ lista3.addEventListener("click", (evento) => { 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. +*/ + +// 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 = ""; + ``` */ \ No newline at end of file diff --git a/index.html b/index.html index 80e0228..8688bfb 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,16 @@
- +
+
+ +
+
+
+
+ +
+