La idea clave
A veces pulsamos una palabra dentro de un botón. El evento nos dice en qué elemento comenzó el clic: eso es event.target.
Ejemplo paso a paso
Este ejemplo muestra la idea en acción. Sigue los pasos y después cámbialo tú.
Ejemplo explicado{ js }
document.querySelector('#accion').addEventListener('click', event => {
document.querySelector('#saludo').textContent = event.target.tagName;
});
Editar y probar este mismo ejemplo ↓
- El botón contiene una palabra dentro de la etiqueta strong.
- event.target es el elemento sobre el que se inició el clic.
- tagName muestra su nombre de etiqueta en mayúsculas.
Practica con código
Antes de empezar, piensa: ¿Será igual el resultado al pulsar el borde del botón y el texto en negrita?
Sustituye target por currentTarget y pulsa la palabra en negrita. Debe mostrar BUTTON en ambos casos.
El resultado que buscamosAparece BUTTON al pulsar el botón fuera de la palabra y STRONG al pulsar la palabra.
HTML + CSS + JS Practica aquí
Tu misiónSustituye target por currentTarget y pulsa la palabra en negrita. Debe mostrar BUTTON en ambos casos.
Vista previa aislada · Sin acceso al sitio principal
ConsolaLista para ejecutar.
Sin comprobar
Escribe tu cambio y pulsa «Comprobar solución». Puedes intentarlo tantas veces como quieras.
Listo
Necesito una pista
Ejecuta el ejemplo y mira la vista previa.
Una pista más
La diferencia está en qué parte del botón pulsas, no en el código.
Ver solución y explicación
Haz clic directamente en las letras del strong y luego en la zona de relleno del botón.
Qué debes recordar: event.target puede ser el hijo sobre el que comenzó el clic.
Práctica pendiente de corregir
La lectura, las prácticas corregidas y las autoevaluaciones guiadas se guardan por separado en este navegador.
Revisado editorialmente · Referencia técnica específica ↗