Utilizar Eventos en Javascript

Un evento es un proceso que se realiza en respuesta a determinada acción realizada por el usuario, por ejemplo si el usuario presiona un botón, entonces en respuesta al evento ‘onclick‘ que representa el presionar el botón realizamos una acción. Para poder interactuar con los eventos se utilizan los Detectores de Eventos lo cuales detectan los eventos y permiten llamar a funciones en respuesta al evento.

Cuales son los Detectores de Eventos Disponibles?

Existen eventos para los diferentes elementos de la página, los mas importantes son los siguientes:

Eventos de Formularios

  • onblur – el campo pierde el foco.
  • onchange – el elemento que tiene el foco ha cambiado su valor.
  • onfocus – cuando el campo recibe el foco.
  • onreset – sucede cuando el usuario ha reseteado el formulario.
  • onselect – cuando un texto ha sido seleccionado.
  • onsubmit – el usuario ha seleccionado enviar el formulario.

Eventos de Enlaces

  • onclick – Cuando se hace click en el elemento seleccionado.
  • onmouseout – Cuando el mouse se mueve encima del enlace o botón.
  • onmouseover – Cuando el mouse se mueve fuera del enlace o botón.

Eventos del Teclado

  • onkeydown El usuario presiona una tecla.
  • onkeypress El usuario mantiene presionada una tecla.
  • onkeyup El usuario suelta la tecla.

Eventos en Ventanas

  • onblur – Sucede cuando la ventana o frame pierde el foco.
  • onerror – Cuando ocurre un error.
  • onfocus – La ventana o frame recibe el foco.
  • onload – Si el objeto se ha cargado completamente.
  • onunload – Cuando la venta se cierra.
  • onresize – Cuando se redimensiona la ventana o frame.

Nota
Si bien es cierto HTML es case-insensitive es decir no distingue entre altas y bajas, para lograr que los documentos html validen es necesario redactar los detectores de eventos en minúsculas.

Como se utilizan los Detectores de Eventos?

Los detectores de eventos se puedes asociar directamente a cada elemento como si fuera una propiedad adicional, además debemos colocar que acción realizar cuando se detecte el evento.

Primera Forma

Se puede hacer que ejecute una serie de acciones en Javacript:

  1. <a href="link.html" onclick="alert('Bienvenido!!');">Entrar</a>

Segunda Forma

También podemos hacer que llame a una función definida por el usuario:

  1. <a href="link.html" onclick="welcome();">Entrar</a>

En este caso estamos llamando a una función llamada welcome la cual debemos definir:

  1. <script type="text/javascript">
  2. function welcome() {
  3.    alert('Welcome!!!');
  4. }

En el ejemplo solo hemos mostrado un mensaje de alerta dando la bienvenida al usuario. Obviamente podríamos realizar múltiples acciones como validación de formulario, formateo de datos o llamar a datos AJAX.

Tercera Forma

Otra forma es asignar los eventos como métodos de los elementos Javascript. Para ello necesitamos asignar identificadores a los elementos que deseamos.

  1. <a href="link.html" id="bt">Entrar</a>

Luego podemos agregar los eventos como propiedades del elemento Javascript (Hay que tener en cuenta que en esta forma los nombres de los detectores de eventos deben estar todos en minúsculas.

  1. <script type="text/javascript">
  2. document.getElementById("bt").onclick = function () {
  3.     alert("Welcome!!!");   
  4. }

Cuarta Forma

Otra forma de crear los detectores de eventos es haciendo uso de listeners, para ello se utiliza la función addEventListener de Javascript, el cual recibe como parámetros el nombre del evento (Sin en prefijo on) y la función a ejecutar. Para nuestro ejemplo se tendría:

  1. <script type="text/javascript">
  2. document.getElementById("bt").addEventListener('click', welcome, false);
  3. function welcome() {
  4.     alert("Welcome!!!");   
  5. }

Como se puede ver utilizamos el evento onclick pero sin el prefijo lo que significa utilizar la palabra ‘click‘.

Con estas dos ultimas formas de asignar los detectores de eventos podemos separar el código HTML del Javascript con lo cual es mas sencillo dar el mantenimiento a nuestro código. Incluso la asignación de los eventos lo podríamos hacer en un archivo externo.

Pueden ver los ejemplos de este post en http://samples.unijimpe.net/eventos-javascript.html.

Mas Información

Comentarios Total 7 comentarios


Javier
Publicado: 27/06/2010 6:22 pm

Muy bueno, pero yo añadiria por lo menos una cuarta forma y es la de tratar el evento con addEvent y sus diversas implementaciones.

Ayoze
Publicado: 27/06/2010 6:37 pm

Aparte de lo que dice Javier en el anterior comentario… también tengo que decir que no es onClick, sino onclick, y así con todos… las propiedades siempre son en minúsculas, lo anterior no valida en strict.

Un saludo, Ayoze.

unijimpe
Publicado: 27/06/2010 6:59 pm

Hola, excelentes acotaciones, gracias a ello podemos enriquecer este post:

Javier, efectivamente hay una cuarta forma de registrar eventos para el cual se hace uso del método addEventListener de Javascript. Para nuestro ejemplo se tendría:

<script type="text/javascript">
document.getElementById("bt").addEventListener('click', welcome, false);
function welcome() {
alert("Welcome!!!");
}
</script>

Para mas información acerca de este método pueden leer Advanced event registration models.

Ayose, el uso de altas y bajas se hace en el HTML tradicional ya que es case insentitive. Pero si se utiliza XHTML se debe utilizar los nombres de los eventos en bajas para poder validar, por lo que es preferible redactar siempre los eventos utilizando minúsculas.

Voy a actualizar el post para incluir estas observaciones.

Miguel
Publicado: 27/06/2010 11:13 pm

Muy buen aporte, oye disculpa unijimpe; no podrias hacer un tema de javascript para cambiar de una pagina a otra sin recargar la web (Y)

Saludos!!!

Tom
Publicado: 29/06/2010 11:11 am

Cabe destacar que los getelementbyid tienen que ser definidos depues que se cargo el DOM, o bien al final del body. Sino no funca.

FCR
Publicado: 15/07/2010 4:12 pm

Gracias por los ejemplos

Jamc
Publicado: 23/07/2010 5:46 pm

# onmouseout – Cuando el mouse se mueve encima del enlace o botón.
# onmouseover – Cuando el mouse se mueve fuera del enlace o botón.

Creo que es al reves:
# onmouseout – Cuando el mouse se mueve fuera del enlace o botón.
# onmouseover – Cuando el mouse se mueve encima del enlace o botón.

Ademas seria bueno mencionar que el addEventListener no funciona en IE y alli se utiliza attachEvent y detachEvent

Muy buen aporte, oye disculpa unijimpe; no podrias hacer un tema de javascript para cambiar de una pagina a otra sin recargar la web (Y)
Hasta donde sé si se va a cambiar de página se tiene que recargar la web salvo que se lo haga con Iframe o Ajax

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)