LECCIÓN 32 / 60 · Eventos e interacción

Averigua dónde ocurrió un clic

Al terminar, podrás: identificar el elemento donde comenzó un clic

Ampliación opcionalNavegador / DOM

Conviene conocer: Lección 31 · Responde a un clic con addEventListener

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
document.querySelector('#accion').addEventListener('click', event => {
  document.querySelector('#saludo').textContent = event.target.tagName;
});
  1. El botón contiene una palabra dentro de la etiqueta strong.
  2. event.target es el elemento sobre el que se inició el clic.
  3. 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 buscamos

Aparece BUTTON al pulsar el botón fuera de la palabra y STRONG al pulsar la palabra.

HTML + CSS + JS Practica aquí
Tu misión

Sustituye target por currentTarget y pulsa la palabra en negrita. Debe mostrar BUTTON en ambos casos.

Vista previa aislada · Sin acceso al sitio principal
Consola
Lista 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 ↗