Eventos en Javascript

Una explicación sobre lo que son los eventos y como definir sus acciones asociadas en Javascript.

Resultado de imagen para eventos en javascriptLos eventos son la manera que tenemos en Javascript de controlar las acciones de los visitantes y definir un comportamiento de la página cuando se produzcan. Cuando un usuario visita una página web e interactúa con ella se producen los eventos y con Javascript podemos definir qué queremos que ocurra cuando se produzcan.

Con javascript podemos definir qué es lo que pasa cuando se produce un evento como podría ser que un usuario pulse sobre un botón, edite un campo de texto o abandone la página.

El manejo de eventos es el caballo de batalla para hacer páginas interactivas, porque con ellos podemos responder a las acciones de los usuarios. Hasta ahora en este manual hemos podido ver muchos ejemplos de manejo de uno de los eventos de Javascript, el evento onclick, que se produce al pulsar un elemento de la página. Hasta ahora siempre hemos aplicado el evento a un botón, pero podríamos aplicarlo a otros elementos de la página.

Cómo se define un evento

Resultado de imagen para computadora con programacionPara definir las acciones que queremos realizar al producirse un evento utilizamos los manejadores de eventos. Existen muchos tipos de manejadores de eventos, para muchos tipos de acciones del usuario. El maneador de eventos se coloca en la etiqueta HTML del elemento de la página que queremos que responda a las acciones del usuario.

Por ejemplo tenemos el manejador de eventos onclick, que sirve para describir acciones que queremos que se ejecuten cuando se hace un click. Si queremos que al hacer click sobre un botón pase alguna cosa, escribimos el manejador onclick en la etiqueta <INPUT type=button> de ese botón. Algo parecido a esto.

<INPUT type=button value="pulsame" onclick="sentencias_javascript...">

Se coloca un atributo nuevo en la etiqueta que tiene el mismo nombre que el evento, en este caso onclick. El atributo se iguala a las sentencias Javascript que queremos que se ejecuten al producirse el evento.

Cada elemento de la página tiene su propia lista de eventos soportados, vamos a ver otro ejemplo de manejo de eventos, esta vez sobre un menú desplegable, en el que definimos un comportamiento cuando cambiamos el valor seleccionado.

<SELECT onchange="window.alert('Cambiaste la selección')"> <OPTION value="opcion1">Opcion 1 <OPTION value="opcion2">Opcion 2 </SELECT>

En este ejemplo cada vez que se cambia la opción muestra una caja de alerta. Podemos verlo en una página aparte.

Dentro de los manejadores de eventos podemos colocar tantas instrucciones como deseemos, pero siempre separadas por punto y coma. Lo habitual es colocar una sola instrucción, y si se desean colocar más de una se suele crear una función con todas las instrucciones y dentro del manejador se coloca una sola instrucción que es la llamada a la función.

Vamos a ver cómo se colocarían en un manejador varias instrucciones.

<input type=button value=Pulsame onclick="x=30; window.alert(x); window.document.bgColor = 'red'">

Son instrucciones muy simples como asignar a x el valor 30, hacer una ventana de alerta con el valor de x y cambiar el color del fondo a rojo. Podemos ver el ejemplo en una página aparte.

Sin embargo, tantas instrucciones puestas en un manejador quedan un poco confusas, habría sido mejor crear una función así.

<script> function ejecutaEventoOnclick(){ x = 30 window.alert(x) window.document.bgColor = 'red' } </script> <FORM> <input type=button value=Pulsame onclick="ejecutaEventoOnclick()"> </FORM>

Ahora utilizamos más texto para hacer lo mismo, pero seguro que a la mayoría les parece más claro este segundo ejemplo. Si se desea, se puede ver esta última página en una ventana aparte

Jerarquía desde el objeto window

En los manejadores de eventos se tiene que especificar la jerarquía entera de objetos del navegador, empezando siempre por el objeto window. Esto es necesario porque hay algún browser antiguo que no sobreentiende el objeto window cuando se escriben sentencias Javascript vinculadas a manejadores de eventos.

El evento onclick:

Se ejecuta cuando damos click a un elemento del DOM en nuestro sitio, no necesariamente este debe ser un boton, puede ser un <div> u otro tag de html. Para incorporarlo en HTML basta con utilizar el atributo “onclick” en un elemento HTML y especificar el codigo o funcion de javascript a ejecutar.

Ej:

1 <button value="esto es un boton" onclick="mi_funcion()"/>

Los eventos onmouseover y onmouseout:

Al diferencia de “onclick”, este evento se lanza cuando pasamos el mouse(puntero) sobre un elemento del html, para especificar gatillo de este evento en un elemento del DOM debe usarse el atributo “onmouseover”, respectivamente “onmouseout” se dispara cuando el puntero sale del area de un elemento del DOM.

Ej:

1 <div id="contenedor" onmouseover="alert('entraste en el area del contenedor')" onmouseout="alert('haz salido del area del contenedor')"/>

 

El evento onload:

Este evento se ejecuta cuando el DOM, es decir todos los elementos html del sitio web han sido cargados correctamente en el cliente, se usa mucho para asegurar la ejecución de codigo cuando se es necesario que la página este completamente cargada para la ejecución correcta de nuestros programas en javascript. Lo ideal es colocarlo unicamente en el tag “<body>” de nuestros sitios web.

Ej:

1 <body onload="mi_funcion()">
2 <!-- codigo html -->
3 </body>

 

 

Codigo de practica con eventos onclick, onload, onmouseover, onmouseout

01 <!DOCTYPE html>

02 <html>

03     <head>

04     "text/javascript">

05     //EVENTOS EN javascript

06

07     function hacer_click()

08     {

09         alert("Me haz dado un click");

10     }

11

12     function hacer_hover()

13     {

14         alert("Estas sobre mi!");

15     }

16

17     function salir_del_hover()

18     {

19         alert("Adios!");

20     }

21

22     function cargar_pagina()

23     {alert("Ya se ha cargado el sitio web");}

24     

25     </head>

26

27     <body onload="cargar_pagina()">

28         <form>

29             <input type="button" value="dame click!"  onmouseout="salir_del_hover()" onmouseover="hacer_hover()" onclick="hacer_click()"/>

30         </form>

31     </body>

32

33 </html>

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s