Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 52

Visitas el mes pasado: 94

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




15. Resumen (VI)

15.6 Eventos

javascript

Definición

Evento es todo lo que sucede en la página y que pueda ser detectado por javascript. Incluimos aquí los procesos que ocurren cuando se abre o cierra la página, lo que está haciendo el usuario, etc.

Con javascript se pueden detectar cuando se produce un cambio o evento en la página y a partir de ahí hacer que se aplique un determinado código cuando el evento se produce. De esta forma se puede interactuar con el usuario, el cual al provocar el evento desencadena una serie de acciones en la página.

Lista de eventos

El nombre del evento se construye con el prefijo "on" seguido del nombre en inglés de la acción que desencadena el evento.

Esta es una lista de eventos que funcionan en todos los navegadores:

Eventos
Evento Descripción Elementos a los que se aplica
onblur Deseleccionar el elemento <button>, <input>, <label>, <select>, <textarea>, <body>
onchange Deseleccionar un elemento que se ha modificado <input>, <select>, <textarea>
onclick Pulsar y soltar el ratón Todos los elementos
ondblclick Pulsar y soltar el ratón dos veces seguidas Todos los elementos
onfocus Seleccionar un elemento (con el ratón o con el tabulador) <button>, <input>, <label>, <select>, <textarea>, <body>
onkeydown Pulsar una tecla (sin soltar) elementos de formulario y <body>
onkeypress Pulsar una tecla elementos de formulario y <body>
onkeyup Soltar una tecla pulsada elementos de formulario y <body>
onload La página se ha cargado completamente <body>
onmousedown Pulsar (sin soltar) un botón del ratón todos los elementos
onmousemove Mover el ratón todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de otro elemento) todos los elementos
onmouseover El ratón "entra" en el elemento (pasa por encima del elemento) todos los elementos
onmouseup Soltar el botón que estaba pulsado en el ratón todos los elementos
onreset Inicializar el formulario (borrar todos sus datos) <form>
onresize Modificar el tamaño de la ventana del navegador <body>
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar un formulario <form>
onunload abandonar o cerrar la página <body>

Clasificación de eventos

Dependiendo de la manera de interactuar en la página podemos clasificarlos en:

Interactuar con enlaces

Podemos usar un enlace para interactuar con javascript. Al pulsar el enlace nos envia a un código javascript el cual se ejecutará.

Para ello la ruta del enlace será como en el siguiente ejemplo:

<a href="javascript: mifuncion();">iniciar mi funcion</a>

Escribimos en el atributo href la palabra javascript seguida por dos puntos, y después la del código javascript; normalmente la llamada a la función que queremos ejecutar.

Insertar eventos

Tenemos tres maneras de insertar los eventos en la página:

En la etiqueta HTML directamente

En la etiqueta de HTML que debe producir el evento insertamos el evento como un atributo de la misma. El valor del atributo es el código javascript que queremos que se produzca al producirse el evento.

onclick="alert('hola mundo');"

En la etiqueta HTML con una función

Igual que el anterior, pero el código javascript consiste en llamar a una función que contiene el código que se va a ejecutar:

onclick="mifuncion();"

En el propio código javascript

Primero creamos la función donde estará el código a ejecutar por el evento:

function mifuncion() { /*...*/}

Después buscamos en la página el elemento al que se le aplica el evento, para incorporar el evento como una propiedad:

document.getElementById("elem1").onclick = mifuncion

Como valor de la propiedad pasamos el nombre de la función (sin paréntesis).

Función window.onload function()

Muchas veces necesitamos que la página ya se haya cargado completamente antes de ejecutar un código javascript. Tal es el caso de la búsqueda de elementos del DOM en la página. Utilizamos para ello el evento onload al que le aplicamos una función anónima:

window.onload = function () {
/*código que se ejecutará después de cargarse la página completamente*/
}

La lectura de la página se realiza de manera secuencial, por lo que si llamamos a un elemento del DOM antes de que éste se haya cargado, javascript no lo encontrará, ignorando el código; sobre todo si ponemos el código al principio de la página.

Para evitar esto debemos poner las llamadas a elementos del DOM y el código que necesite que la página esté cargada dentro de esta función anónima.

El elemento this

Este elemento o palabra clave hace referencia al mismo elemento HTML en el que está el evento; de manera que no lo tengamos que buscar en el DOM. Según la forma de insertar el evento el código será distinto:

Si insertamos el evento directamente en el HTML pondremos "this" para referirnos al propio elemento:

<p onclick="this.style.color='green';">Pulsa para cambiar el color</p>

Si insertamos el código en el HTML mediante una función el elemento "this" debemos pasarlo como argumento de la función:

<p onclick="mifuncion(this);">Cambia el color del texto</p>

Recogemos en la función el argumento para usarlo como el acceso al propio elemento del DOM:

function mifuncion(elem) {
    elem.style.color="green";
    }

Si insertamos el código directamente en javascript, podemos utilizar el elemento "this" dentro de la función, por ejemplo creamos primero la función.

function mifuncion() {
    this.style.color="green";
    }

Después provocamos el evento con el código:

document.getElementById("texto1").onclick = mifuncion;

El objeto event

Una vez producido un evento a veces necesitamos tener más información sobre el mismo. Para ello utilizamos el objeto "event".

La mayoría de los navegadores obtienen este objeto al pasarlo como un argumento implícito a la función que es llamada por el evento. Sin embargo Internet Explorer la considera como una propiedad del objeto "window", por lo que el código es distinto.

El código compatible con todos los navegadores es el siguiente:

function manejaEventos(elEvento) {
   var evento = elEvento || window.event;
   /* código para extraer la información del evento  */
   }

Obtenemos así el objeto "event" en la variable evento, el cual tiene una serie de propiedades que nos darán la información sobre el evento.

Información del evento

Tipo de evento

La propiedad .type aplicada al objeto "event" nos dará la información del tipo de evento que se produce:

function manejaEventos(elEvento) {
   var evento = elEvento || window.event;
   tipo = evento.type;
   }

La variable tipo nos da el nombre del evento que se ha producido, pero sin el prefijo on. Por ejemplo si el evento es onclick, el valor de type será "click".

Información sobre el ratón

La información que más nos puede interesar sobre el ratón es la posición del mismo, es decir las coordenadas del puntero del ratón en la página.

Coordenadas del ratón

Una vez obtenido el objeto "event" (en evento), hay varias propiedades para obtener las coordenadas del ratón. Todas ellas se miden en píxeles. Dependiendo del origen de coordenadas tenemos:

Respecto a la pantalla completa : Origen de coordenadas en la esquina superior izquierda de la pantalla:

Respecto a la ventana del navegador : Origen de coordenadas en la esquina superior izquierda de la parte visible de la página (ventana del navegador donde se muestra la página)

Respecto al origen de la página : Origen de coordenadas en la esquina superior izquierda de la propia página web (ésta puede estar desplazada y no verse completa en el navegador, por lo que puede no coincidir con el anterior).

Esta opción no es compatible con Internet Explorer. Para obtener las oordenadas en Internet Explorer, obtendremos las coordenadas del navegador y le sumaremos el desplazamiento de la página. El código es el siguiente:

coordX = evento.clientX + document.documentElement.scrollLeft;

coordY = evento.clientY + document.documentElement.scrollTop;

Los demás navegadores también admiten esta forma de obtener las coordenadas de la página.


botones del ratón

Otro tipo de información que podemos obtener es cuál es el botón que se ha pulsado en el ratón. Para ello utilizaremos la propiedad .button del objeto "event".

boton = evento.button;

La propiedad sólo funciona con los eventos onmousedown y onmouseup. Los demás eventos ignoran esta propiedad.

El resultado es un número que indica el botón pulsado. Sin embargo da distinto resultado en Internet Explorer que en el resto de navegadores:

Información sobre el teclado

El objeto "event" puede darnos información sobre los eventos que se producen desde el teclado. Para ello utiliza las propiedades .keyCode y .charCode.

Estas propiedades están disponibles para los eventos de teclado, los cuales se producen cuando el usuario pulsa una tecla. Al pulsar una tecla se producen los siguientes eventos y en este orden:

Las propiedades .keyCode y .charCode son admitidas por los eventos anteriores, pero su resultado es distinto dependiendo del evento al que se le aplique. Además en Internet Explorer hay algunos resultados que pueden ser diferentes.

Los datos que podemos obtener con estas propiedades son:

Para saber cuál es el carácter pulsado se utiliza la función String.fromCharCode(), que convierte el código de carácter a una cadena de texto que contiene el caracter pulsado.

caracter = String.fromCharCode(cod_Caracter)

La información que muestran las propiedades anteriores puede resumirse de la siguiente manera:

Propiedades de "event" para eventos de teclado
Eventos Navegador Propiedad Valor obtenido
onkeydown
onkeyup
Todos keyCode Código interno
charCode No definido
onkeypress Internet Explorer keyCode Código de carácter
charCode No definido
Todos excepto Internet Explorer keyCode Teclas normales: no definido
Teclas especiales: código interno
charCode Teclas normales: código carácter
Teclas especiales: 0

Son teclas especiales aquellas que no sirven para escribir un carácter sino para cambiar algún aspecto de la escritura (mayúsculas, Alt, retroceso, tabulador, etc.).





En la siguiente página veremos cómo estructura javascript sus elementos en clases de objetos.

Objetos Javascript.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com