Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

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

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

15. Resumen (VI)

15.6 Eventos

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:

Clasificación de eventos

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

• Eventos del ratón: Aquellos en los que el usuario utiliza el ratón para provocarlos.
• Eventos de teclado: Aquellos en los que el usuario utiliza el teclado para provocarlos.
• Eventos de página: Aquellos en los que cambia el estado de la página (se carga, se descarga, se redimensiona, etc.)
• Eventos de formulario: Aquellos en los que se cambia el estado de algún elemento de un formulario.

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:

• var ooordX = evento.screenX; : Distancia horizontal al borde izquierdo de la pantalla.
• var ooordY = evento.screenY; : Distancia vertical al borde superior 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)

• var ooordX = evento.clientX; : Distancia horizontal al borde izquierdo de ventana del navegador.
• var ooordY = evento.clientY; : Distancia vertical al borde superior de la ventana del navegador.

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).

• var ooordX = evento.pageX; : Distancia horizontal al borde izquierdo de la página.
• var ooordY = evento.pageY; : Distancia vertical al borde superior de la página.

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:

• En Internet Explorer : 1 = botón izquierdo; 2 = botón derecho; 3 = botón izquierdo y derecho a la vez; 4 = botón central.
• En resto de navegadores :0 = botón izquierdo; 1 = botón central; 2 = botón izquierdo.

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:

• onkeydown: Corresponde al hecho de pulsar una tecla y no soltarla.
• onkeypress: Corresponde a la propia pulsación de la tecla.
• onkeyup: Corresponde al hecho de soltar una tecla que estaba pulsada.

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:

• El código interno: Es un código que identifica a la tecla en sí, cada tecla tiene un número independientemente de si con ella se pueden escribir uno, dos o tres caracteres.
• Código del carácter: Cada carácter asociado a una tecla tiene un código, una tecla puede tener uno dos o tres, códigos asociados, dependiendo de si se pulsa normalmente, en mayúsculas o con la tecla AlrGr.

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:

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.

Página creada por ANYELGUTI.

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

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

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