80 lines
2.9 KiB
JavaScript
80 lines
2.9 KiB
JavaScript
// Agregar acá el código javascript para los ejercicios
|
|
|
|
//EJERCICIO 1
|
|
// 1. Inicialización del estado
|
|
let contador = 0;
|
|
|
|
// 2. Selecciono los elementos del DOM
|
|
const boton = document.getElementById('boton-contador');
|
|
const parrafo = document.getElementById('texto-contador');
|
|
|
|
// 3. Registro del Event Listener utilizando una función clásica
|
|
boton.addEventListener('click', function () {
|
|
// Incremento el valor de la variable en 1
|
|
contador++;
|
|
// Actualizo el contenido de texto del párrafo
|
|
parrafo.textContent = `Botón clickeado ${contador} veces.`;
|
|
});
|
|
|
|
//EJERCICIO 2
|
|
// 1. Selección de los elementos del DOM
|
|
const campo = document.querySelector("#campo-texto");
|
|
const contadorcaracteres = document.querySelector("#contador-caracteres");
|
|
|
|
// 2. Registro del Event Listener utilizando una función clásica
|
|
campo.addEventListener("input", function (e) {
|
|
// Obtengo el texto actual del campo
|
|
const textoActual = e.target.value;
|
|
// Calculo la longitud del texto
|
|
const cantidadCaracteres = textoActual.length;
|
|
// Actualizo el contenido del párrafo
|
|
contadorcaracteres.textContent = `Caracteres ingresados: ${cantidadCaracteres}`;
|
|
});
|
|
|
|
//EJERCICIO 3
|
|
|
|
// 1. Selecciono el elemento padre (la lista)
|
|
const lista = document.querySelector("#lista-items");
|
|
|
|
// 2. Registro un único listener en el elemento padre
|
|
lista.addEventListener("click", function (e) {
|
|
// Valido si el elemento exacto que recibió el clic es un <li>
|
|
if (e.target.tagName === "LI") {
|
|
// Busco si existe actualmente algún ítem con la clase 'seleccionado'
|
|
const itemSeleccionadoPrevio = lista.querySelector(".seleccionado");
|
|
// Si se encuentra un ítem seleccionado, se le remueve la clase
|
|
if (itemSeleccionadoPrevio) {
|
|
itemSeleccionadoPrevio.classList.remove("seleccionado");
|
|
}
|
|
// Agrego la clase 'seleccionado' al ítem que disparó el evento
|
|
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");
|
|
}); |