 |
Información generada en un evento.
Información generada en un evento
Un evento se produce cuando el usuario se ha producido una determinada acción, como por ejemplo hacer clic en un componente o redimensionar una ventana. Podemos definir varios tipos de eventos en HTML:
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 del navegador. Luego mostraremos la coordenada x e y donde se presionó.
pagina.html
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script >
function presionado(e)
{
alert('Coordenada x de la flecha del mouse:'+e.clientX+'\n'+
'Coordenada y de la flecha del mouse:'+e.clientY);
}
</script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body onclick="presionado(event)" id="cuerpo">
Hacer clic dentro del navegador y se mostrará la coordenada del mouse en ese momento.
</body>
</html>
El código de javascript
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 la marca body. Podemos ver que le pasamos a la función presionado el objeto event. (En navegadores Internet Explorer antiguos de Microsoft no funciona esta técnica)
<body onclick="presionado(event)" id="cuerpo">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.