
Generalmente, los manejadores de eventos necesitan información adicional para procesar las tareas que tienen que realizar. Si una función procesa, por ejemplo, el evento click
, lo más probable es que necesite conocer la posición en la que estaba el ratón en el momento de realizar el click; aunque ésto quizás tampoco sea muy habitual, a no ser que estemos programando alguna utilidad de tipo gráfico.
Lo que sí es más común es tener información adicional en los eventos del teclado. Por ejemplo, cuando pulsamos una tecla nos interesa saber cuál ha sido la tecla pulsada, o si tenemos a mayores alguna tecla especial pulsada como Alt
, Control
, etc.
Para gestionar toda esa información disponemos del objeto Event
, el cuál nos permitirá acceder a esas propiedades adicionales que se generan en los eventos.
Como siempre, los navegadores gestionan de forma diferente los objetos Event
. Por ejemplo, en las versiones antiguas de Internet Explorer, el objeto Event
forma parte del objeto Window
, mientras que en otros navegadores como Firefox, Chrome, etc., para acceder al objeto Event
lo haremos a través de un parámetro, que escribiremos en la función que gestionará el evento.
Por ejemplo:
document.getElementById("unParrafo").addEventListener('click',gestionar,false); const gestionar = (miEvento) => { alert (miEvento.type); // Mostrará una alerta con el tipo de evento que en este caso es 'click'. }
En el código del ejemplo anterior cuando se produce el evento de click en un párrafo con id="unParrafo"
, durante la fase de burbujeo, se llamará a la función gestionar. En la función gestionar hemos creado un argumento que le llamamos miEvento, y es justamente en ese argumento que hemos puesto en la función, dónde el navegador de forma automática, pondrá todos los datos referentes al evento que se ha disparado.
Una vez dentro de la función, mostramos una alerta con el tipo de evento (propiedad type
del objeto Event
) que se acaba de disparar.