unijimpe

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:

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

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

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

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

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.

<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.

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

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:

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

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

• Introduction to Events
• Javascript Event Object
• Advanced event registration models
• JavaScript Events

Posts Relacionados

• Eventos del teclado en AS2
• Introducción a jQuery
• EasyDrag jQuery Plugin
• AutoClear en Formularios HTML
• Swiff: Mootools Flash Plugin