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.

Prácticas Javascript

Ejercicios de prácticas para crear elementos interactivos con javascript


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





logo 

Donativos

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




Resumen V

Eventos

Definición

Cualquier acción que suceda en la página, tanto por parte del usuario como acciones normales del navegador. Ejemplos son, cargarse la página, movimientos del ratón, pulsar una tecla, etc.

En Javascript puede detectarse cuando se produce un evento y aplicar un código que realice una determinada acción.

Lista de eventos:

La siguiente lista contiene los eventos que son compatibles con todos los navegadores:

Eventos
Evento Descripción Elementos a los que se aplica
onblur Deseclecionar 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 "sale" del 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>
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>

Los eventos pueden clasificarse en:

Insertar el evento

Podemos insertar el evento en la página de varias maneras:

Insertar el código en la página

Insertamos el evento como un atributo de la etiqueta HTML en el que se produce, y su valor será el código javascript que queremos ejecutar al producirse el el evento. Ejemplo:

<p ondblclick="alert('esto es un evento')">Doble click para ver el mensaje</p>

Llamar a una función desde la página

Insertamos el evento como un atributo de la etiqueta HTML, pero su valor es la llamada a una función javascript. La función se ejecutará al producirse el evento.

<p onclick="empezar()">empezar la acción</p>

En el código anterior al ejecutarse el evento se llama a una función que tendrá las instrucciones javascript que queramos realizar.

Desde el propio código javascript

En el mismo código javascript localizamos el elemento del DOM y le insertamos el evento como una propiedad del mismo. Le asignamos luego el nombre de la función que se quiere ejecutar con el evento.

document.getElementById("elemento").onclick = ejecutar

Buscamos primero el elemento en el DOM mediante document.getElementById("elemento"). Aplicamos el evento como una propiedad del mismo: .onclick. Asignamos como valor el nombre de la función que debe ejecutarse con el evento: = ejecutar

La función debe escribirse sin paréntesis.

La etiqueta del DOM a la que accedemos debe haberse cargado antes de que se ejecute el código. Si el código javascript está al principio de la página la englobaremos dentro de la función anónima window.onload = function().

Información del evento

A veces necesitamos obtener información adicional del evento. Los casos más normales son obtener la posición del ratón en los eventos de ratón, o la tecla pulsada en los eventos de teclado.

Javascript posee un objeto especial que recoge la información del evento, es el objeto event.

Acceso al objeto event:

En Internet Explorer:

window.event

En resto de navegadores: Es un argumento implícito que se le pasa a la función:

function manejaEventos(elEvento) { ..

Para que funcione en todos los navegadores utilizaremos el siguiente código:

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

Donde la variable eventorecoje el objeto evento.

Información del tipo de evento:

La propiedad type nos informa del tipo de evento:

var tipo = evento.type

El resultado es el nombre del evento sin el prefijo on, Ejemplo: si el evento que abre la la función es onmouseover la variable tipo tendrá el valor "mouseover"

Coordenadas del ratón

En los eventos de ratón podemos obtener la posición del puntero mediante una serie de propiedades. Hay tres tipos de información sobre las coordenadas del puntero dependiendo del punto de origen. El resultado en todo caso son números que nos indican la distancia en píxeles al origen. En todas las propiedades la X es la distancia horizontal y la Y la vertical.

Pantalla completa: origen en la esquina superior izquierda de la pantalla.

Origen en la ventana del navegador: origen en la esquina superior izquierda de la ventana del navegador.

Origen en la página origen en la esquina superior izquierda de la página web

Esta últuma opción no es compatible con Internet Explorer en donde obtendremos las coordenadas respecto de la ventana del navegador y sumaremos el desplazamiento que tiene la página respecto a su origen. Esto se obtiene mediante las propiedades document.documentElement.scrolLeft y document.documentElement.scrolTop. Esta forma también puede hacerse en el resto de navegadores, por lo que para que funcione en todos el código será:

coordenadaX = clientX + document.documentElement.scrollLeft;
coordenadaY = clientY + document.documentElement.scrollTop;

Botones del ratón

Podemos obtener la información de qué botón del ratón se ha pulsado mediante la propiedad button. El resultado es un número para cada botón, sin embargo Internet Explorer da un resultado distinto para los botones.

Esta propiedad sólo funciona con los eventos onmousedown y onmouseup, el resto de eventos ignoran esta propiedad. Los valores son los siguientes:

En Internet Explorer : 1 = botón izquierdo, 2 = botón derecho, 3 = botón izquierdo y derecho a la vez, 4 = botón central

Resto de navegadores : 0 = botón derecho, 1 = botón central, 2 = botón derecho.

Información del teclado

Para acceder a la información del teclado hay que tener en cuenta que:

EVENTOS : Al pulsar el usuario una tecla se producen los siguientes eventos en este orden:

LAS TECLAS : Los datos obtenidos de las teclas pueden ser:

PROPIEDADES : Estas son: keyCode y charCode .

No funcionan igual con todos los eventos ni con todos los navegadores. A continuación explicamos su funcionamiento:

Con los eventos keydown y keyup: en todos los navegadores:

El evento keypress: en Internet Explorer:

El evento keypress: en resto de navegadores:





En la siguiente página veremos los objetos y clases de objetos, sus métodos y propiedades; empezaremos por las cadenas de texto y arrays.

Texto y arrays



Resumen código js.

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