El objeto Event
En Javascript los eventos se implementan como un objeto Event. Este objeto implementa la interfaz de eventos del DOM.
Cuando se produce alguna acción o cambio en el entorno del documeto web se genera un evento en el DOM. Esto provoca la creación de un objeto de nombre event que hereda los métodos y propiedades de Event, y además pueden añadirse otros específicos del evento en particular.
Por ejemplo: cuando se produce un evento de teclado por pulsar una tecla, Javascript crea el objeto event, con el constructor KeyBoardEvent que posee una serie de propiedades específicas (como información sobre las teclas), además de las heredadas de Event.
Este objeto es el argumento que se envía a la función que maneja el evento. A través de sus propiedades se puede obtener toda la información necesaria para actuar y hacer lo que se haya programado.
function verTecla(e){
window.alert("Tecla pulsada "+e.code+"\n"+e.target+"\n"+e.constructor.name)
}
document.body.addEventListener("keydown", verTecla)
Para probar este ejemplo crea una página web simple con este script y verás que al pulsar una tecla se abre una ventana de aviso con el mensaje sobre la tecla pulsada, el objeto destino del evento (en este caso body) y por último el nombre del constructor de este evento.
En este caso se trata de un evento de tipo KeyEvent, y entre sus propiedades están code, específica del objeto, y target, proveniente del constructor Event. La acción que se intercepta es keydown (evento onkeydown).
Resumen
La interfaz de eventos del modelo de objetos DOM se implementa en Javascript mediante el objeto genérico Event.
A partir de Event se crean varios tipos de constructores de eventos que añaden a las propiedades de Event las suyas propias, específicas de la acción que los dispara.
Al producirse un evento en Javascript se crea un objeto de nombre event de alguno de los tipos predefinidos:
- AnimationEvent
- ClipboardEvent
- DragEvent
- Event
- FocusEvent
- HashChangeEvent
- InputEvent
- KeyboardEvent
- MouseEvent
- WheelEvent
- PageTransitionEvent
- PopStateEvent
- ProgressEvent
- StorageEvent
- TouchEvent
- TransitionEvent
- UiEvent
Target o currentTarget
Cuando manejamos controladores de eventos siempre tenemos disponible el objeto event y, con él, podemos acceder al objeto que disparó el evento. Hasta aquí está claro.
Pero en el objeto event tenemos dos métodos muy parecidos a primera vista: target y currentTarget. Ambos se refieren al disparador del evento.
Pero hay una diferencia esencial: uno es el objeto que realmente dispara el evento (target) y otro el objeto para el que se definió el evento (currentTarget) ¿Ah, ¿pero no son el mismo? Pues no siempre.
Piensa en un mismo gestor de eventos para dos elementos diferentes o en los elementos anidados.
Recuerda eu un evento atraviesa el DOM (flujo de eventos)
Por ejemplo
<div id="exterior" onclick="avisar()">
<div id="texto">Esto es un texto dentro del bloque exterior</div>
<button id="boton">Boton dentro de exterior</button>
</div>
<script>
function avisar(){
console.log("disparado por: "+event.target.id)
console.log("definido en: "+event.currentTarget.id)
}
</script>
Si pruebas este ejemplo observarás la diferencia:
Pulsas con el ratón el texto y tendrás como salida
Disparado por: texto
Definido en: exterior
Si pulsas en el botón tendrás
Disparado por: boton
Definido en: exterior
Es fácil ver la diferencia
¿Cuando usar uno u otro? pues ya dependerá de tu aplicación, si el evento es disparado siempre por el elemento para el que e define, es indifernte a efectos prácticos.
Resumiendo
Recuerda que:
target es el que dispara el evento
currentTarget es el elemento al que se asigna el controlador