clase-9-eventos/clase-9.js

// Agregar acá el código javascript para los ejercicios

//Ejercicio 1 de la clase 9

let clicks = 0;
const boton = document.querySelector("#botonEjc1");
const parrafo = document.querySelector("#textoContador");

boton.addEventListener("click", function(){
    clicks++;
    parrafo.textContent = `Botón clickeado ${clicks} veces`;
});



//Ejercicio 2 de la clase 9

const campo = document.querySelector("#texto");
const contadorCaracteres = document.querySelector("#cantidadCaracteres");

campo.addEventListener("input", function() {
    contadorCaracteres.textContent = `Cantidad de caracteres: ${campo.value.length}`;
});



//Ejercicio 3 de la clase 9"

const lista = document.querySelector("#lista");
lista.addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        
        const items = document.querySelectorAll("#lista li");

        for (const item of items) {
            item.classList.remove("seleccionado");
        };

        event.target.classList.add("seleccionado");
        console.log(event.target.textContent);
    }
});



//Ejercicio 4 de la clase 9
//Fase de Bubbling
const externo1 = document.querySelector("#externo");
externo1.addEventListener("click", function() {
    console.log("externo");
});

const interno1 = document.querySelector("#interno");
interno1.addEventListener("click", function() {
    console.log("interno");
});

const boton1 = document.querySelector("#botón");
boton1.addEventListener("click", function() {
    console.log("botón");
});
//Se visualiza en consola como:
//botón
//interno
//externo


//Fase de Capturing solamente en #externo
externo1.addEventListener("click", function() {
    console.log("externo - capturing");
}, true);
//Se visualiza en consola como:
//externo - capturing
//botón
//interno
//externo