Para poder seguir este curso debes tener conocimentos de los lenguajes HTML y CSS para construir páginas Web. Si no es así puedes aprenderlo en Aprende Web
Logo Aprende Web

Aprende Web

curso de JAVASCRIPT

por Anyelguti


Tema6: Eventos

6.1. Tipos de eventos

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 curso; 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 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>

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

6.2 Manejar eventos

Ir a la página

anteriorAnterior     Siguiente siguiente

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com manda un correo