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: 91

Visitas el mes pasado: 133

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.




6. Eventos (I)

6.1 Tipos de eventos

javascript

Definición

Los eventos definen lo que hace el usuario en la página, o en el elemento de la página al que se le aplica. Cualquier acción que haga el usuario es un evento: mover el raton, hacer click o doble click, pulsar una tecla, entrar con el ratón en un elemento, seleccionarlo con el ratón o con la tecla TAB, etc. Incluso el hecho de acabar de cargarse la página es un evento.

En Javascript se puede detectar cuando se produce un determinado evento, y aplicarle un código para que al producirse el evento se ejecute ese código. De esta forma se interactúa con el usuario, el cual al provocar el evento desencadena la ejecución del código javascript asociado.

Ya hemos visto y usado algunos eventos en páginas anteriores de este manual; en concreto los eventos onclick, onmouseover y onmouseout, pero hay mas eventos que veremos a continuación.


Lista de eventos

Aunque hay más eventos de los que se dan en la lista siguiente, éstos no son compatibles con todos los navegadores, por lo que daremos aquí sólo los que pueden usarse en todos los navegadores, la lista es bastante amplia y permite prácticamente controlar cualquier acción del usuario o variación que se produzca en la página.

Para construir el nombre del evento se utiliza el prefijo on seguido del nombre en inglés de la acción que produce el evento. así por ejemplo el hecho de pulsar el raton se denomina onclick y el hecho de moverlo se denomina onmousemove.

La lista de los eventos mas importantes compatibles con todos los navegadores es la siguiente:

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

Podemos clasificar los eventos en varios tipos, dependiendo de la manera de interactuar con ellos del usuario. estos son:


Javascript desde enlaces

También podemos utilizar los enlaces para llamar al código javascript. En este caso el enlace se comporta de la misma manera que si pusieramos el evento onclick, es decir, al pulsar sobre el enlace se activa el código javascript.

Para ello debemos escribir el enlace de la siguiente manera:

<a href="javascript: funcionJavascript()">Texto del enlace</a>

En el atributo href escribimos como valor la palabra javascript seguida de dos puntos. Después llamamos a la función javascript que contiene el código.

veamos ahora una página de ejemplo donde se llama al código javascript con los enlaces:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Javascript en enlaces:</title> 
<script type="text/javascript">
function cambia(col) {
         document.getElementById('cambiar').style.color = col 
         }
</script>
</head>
<body>
  <h1>Javascript en enlaces</h1>
   <a href="javascript:cambia('red')">Cambiar a rojo</a><br/>
   <a href="javascript:cambia('blue')">Cambiar a azul</a><br/>
  <h2 id="cambiar">Esta línea debe cambiar de color.</h2>
</body>
</html>

En el siguiente enlace se muestra como queda esta página:

Javascript en enlaces




En la próxima página veremos cómo utilizar los eventos en la página

Manejar eventos



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