Ahora veremos como recupera información cuando se produce un evento.
Veamos con un ejemplo como recuperaremos datos. Implementaremos una página que capture el clic del mouse dentro de un recuadro. Luego mostraremos la coordenada x e y donde se presionó con respecto a la ventana del navegador. pagina.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body id="cuerpo">
<div id="recuadro" onclick="presionado(event)">Hacer clic dentro del recuadro.</div>
<script src="funciones.js"></script>
</body>
</html>
estilos.css
#recuadro {
margin: 0 auto;
width: 400px;
height: 400px;
background-color: brown;
}
funciones.js
function presionado(e) {
alert('Coordenada x de la flecha del mouse:' + e.clientX + '\n' +
'Coordenada y de la flecha del mouse:' + e.clientY)
}
En la página HTML inicializamos el evento onclick para el div respectivo. Podemos ver que le pasamos a la función presionado el objeto event.
<div id="recuadro" onclick="presionado(event)">Hacer clic dentro del recuadro.</div>
Ahora la función presionado tiene un parámetro:
function presionado(e)El nombre del parámetro puede ser cualquiera pero en la llamada a la función debe ser event.
alert('Coordenada x de la flecha del mouse:'+e.clientX+'\n'+
'Coordenada y de la flecha del mouse:'+e.clientY)
Accedemos a las propiedades clientX y clientY del objeto e que llega como parámetro a la función.