54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
// Ejercicio 1 - Contador de clics
|
|
let clickCount = 0;
|
|
const boton = document.getElementById('miBoton');
|
|
const parrafo = document.getElementById('contadorClicks');
|
|
|
|
boton.addEventListener('click', function() {
|
|
clickCount++;
|
|
parrafo.textContent = `Botón clickeado ${clickCount} veces`;
|
|
});
|
|
|
|
// Ejercicio 2 - Contador de caracteres en tiempo real
|
|
const campoTexto = document.getElementById('campoTexto');
|
|
const contadorCaracteres = document.getElementById('contadorCaracteres');
|
|
|
|
campoTexto.addEventListener('input', function() {
|
|
contadorCaracteres.textContent = `Caracteres ingresados: ${campoTexto.value.length}`;
|
|
});
|
|
|
|
// Ejercicio 3 - Selección única en la lista con delegación de eventos
|
|
const listaItems = document.getElementById('listaItems');
|
|
|
|
listaItems.addEventListener('click', function(event) {
|
|
const item = event.target.closest('li');
|
|
if (!item || !listaItems.contains(item)) {
|
|
return;
|
|
}
|
|
|
|
listaItems.querySelectorAll('li').forEach(function(li) {
|
|
li.classList.remove('seleccionado');
|
|
});
|
|
item.classList.add('seleccionado');
|
|
});
|
|
|
|
// Ejercicio 4 - Bubbling y capturing
|
|
const externo = document.getElementById('externo');
|
|
const interno = document.getElementById('interno');
|
|
const botonCaptura = document.getElementById('botonCaptura');
|
|
|
|
externo.addEventListener('click', function() {
|
|
console.log('bubbling: externo');
|
|
});
|
|
|
|
interno.addEventListener('click', function() {
|
|
console.log('bubbling: interno');
|
|
});
|
|
|
|
botonCaptura.addEventListener('click', function() {
|
|
console.log('bubbling: button');
|
|
});
|
|
|
|
externo.addEventListener('click', function() {
|
|
console.log('capturing: externo');
|
|
}, true);
|