Eventos de JavaScript

Los eventos en JavaScript son acciones u ocurrencias que suceden en el sistema que está programando, de las cuales el sistema le informa para que pueda responder a ellos de alguna manera si lo desea. Por ejemplo, si el usuario selecciona un botón en una página web, es posible que desee responder a esa acción mostrando un cuadro de información. En este artículo, discutimos algunos conceptos importantes relacionados con los eventos y analizamos cómo funcionan en los navegadores.

JavaScript le permite ejecutar código cuando se detectan eventos. HTML permite que los atributos del controlador de eventos, con código JavaScript , se agreguen a los elementos HTML.

Como hemos visto hasta ahora uno de los usos principales de JavaScript es la implementación de algoritmos que reaccionan a eventos que se producen en una página web. Cuando se termina de cargar completamente una página web se dispara el evento onload, cuando se presiona un botón de tipo submit se dispara el evento onsubmit, cuando movemos la flecha del mouse se dispara onmousemove y otra gran cantidad de eventos que nos informa el navegador y nosotros podemos capturarlos y hacer un algoritmo a nuestra medida.
JavaScript implementa tres formas distintas de capturar los eventos que emite el navegador.

Eventos definidos directamente en la marca HTML.
Eventos definidos accediendo a propiedades del objeto.
Modelo de eventos definidos por W3C (World Wide Web Consortium)

Eventos definidos directamente en la marca HTML.

Esta metodología esta en desuso, de todos modos muchos sitios antiguos implementan esta técnica.

Problema

Implementar un formulario que solicite la carga del nombre de usuario y su clave. Mostrar un mensaje si no se ingresan datos en alguno de los dos controles.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<form method="post" action="procesar.php" onsubmit="validar();" id="formulario1">
Ingrese nombre:
<input type="text" id="usuario" name="usuario" size="20">
<br>
Ingrese clave:
<input type="password" id="clave" name="clave" size="20">
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>

<script>
function validar()
{
var usu=document.getElementById("usuario").value;
var cla=document.getElementById("clave").value;
if (usu.length==0 || cla.length==0)
{
alert('El nombre de usuario o clave está vacío');
return false;
}
else
return true;
}
</script>

</body>
</html>

Ver ejemplo anterior

Lo primero que tenemos que ver que la marca form define la propiedad onsubmit y le asigna el nombre de la función JavaScript que debe llamarse previo a que el navegador empaquete todos los datos del formulario y los envía al servidor para ser procesados:

Como vemos debemos indicar el nombre de la función y los paréntesis (en este caso no se envían parámetros por lo que los paréntesis van abiertos y cerrados)

En el bloque JavaScript debemos implementar la función validar donde extraemos los valores de cada control y verificamos si alguno de los dos no tiene cargado caracteres, en caso que suceda esto mostramos un mensaje y retornamos un false para que el navegador no envíe los datos del formulario al servidor. Si la función retorna true los datos del formulario son enviados por el navegador al servidor:

function validar()
{
var usu=document.getElementById("usuario").value;
var cla=document.getElementById("clave").value;
if (usu.length==0 || cla.length==0)
{
alert('El nombre de usuario o clave está vacío');
return false;
}
else
return true;
}

Esta metodología de inicializar eventos debe ser evitada en todo lo posible.

Eventos definidos accediendo a propiedades del objeto.

Esta metodología es todavía ampliamente utilizada ya que la mayoría de los navegadores lo implementan en forma similar.

Problema

Implementar un formulario que solicite la carga del nombre de usuario y su clave. Mostrar un mensaje si no se ingresan datos en alguno de los dos controles.

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<form method="post" action="procesar.php" id="formulario1">
Ingrese nombre:
<input type="text" id="usuario" name="usuario" size="20">
<br>
Ingrese clave:
<input type="password" id="clave" name="clave" size="20">
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>

<script>
window.onload=inicio;

function inicio()
{
document.getElementById("formulario1").onsubmit=validar;
}

function validar()
{
    var usu=document.getElementById("usuario").value;
    var cla=document.getElementById("clave").value;
if (usu.length==0 || cla.length==0)
{
    alert('El nombre de usuario o clave está vacío');
    return false;
}
else
    return true;
}
</script>

</body>
</html>

Ver ejemplo anterior

Con esta segunda metodología vemos que el código HTML queda limpio de llamadas a funciones JavaScript y todo el código queda dentro del bloque del script (pudiendo luego llevar todo este bloque a un archivo externo *.js)

Lo primero que vemos es inicializar la propiedad onload del objeto window con el nombre de la función que se ejecutará cuando finalice la carga completa de la página, es importante notar que a la propiedad onload le asignamos el nombre de la función y NO debemos disponer los paréntesis abiertos y cerrados (ya que no se está llamando a la función sino le estamos pasando la dirección o referencia de la misma)

window.onload=inicio;

La función inicio es llamada por el objeto window cuando se termina de cargar la página. En esta función obtenemos la referencia del objeto formulario1 mediante el método getElementById e inicializamos la propiedad onsubmit con el nombre de la función que será llamada cuando se presione el botón submit del formulario:

function inicio()
{
document.getElementById("formulario1").onsubmit=validar;
}

Por último tenemos la función validar que verifica si los dos controles del formulario están cargados:

function validar() {
var usu=document.getElementById("usuario").value;
var cla=document.getElementById("clave").value;
if (usu.length==0 || cla.length==0)
{
alert('El nombre de usuario o clave está vacío');
return false;
}
else
return true;
}

La misma metodología pero utilizando funciones anónimas para cada evento el código ahora queda condensado:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<form method="post" action="procesa.php" id="formulario1">
Ingrese nombre:
<input type="text" id="usuario" name="usuario" size="20">
<br>
Ingrese clave:
<input type="password" id="clave" name="clave" size="20">
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>

<script>
window.onload=function() {
document.getElementById("formulario1").onsubmit=function () {
var usu=document.getElementById("usuario").value;
var cla=document.getElementById("clave").value;
if (usu.length==0 || cla.length==0)
{
alert('El nombre de usuario o clave está vacío');
return false;
}
else
return true;
}
}
</script>

</body>
</html>

Ver ejemplo anterior

Analicemos un poco el código implementado, a la propiedad onload del objeto window le asignamos una función anónima:

window.onload=function() {
...
}

En la implementación de la función anónima inicializamos la propiedad onsubmit del objeto formulario1 con otra función anónima:

document.getElementById("formulario1").onsubmit=function () {
...
}

Esta sintaxis de funciones anónimas es ampliamente utilizado.

Modelo de eventos definidos por W3C (World Wide Web Consortium)

Este modelo de eventos se basa en la implementación de un método para todos los objetos que nos permite registrar eventos. La sintaxis del método es:

addEventListener(evento, método a ejecutar, false);

Veamos como implementamos el problema anterior utilizando este nuevo modelo de eventos:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>

<form method="post" action="procesa.php" id="formulario1">
Ingrese nombre:
<input type="text" id="usuario" name="usuario" size="20">
<br>
Ingrese clave:
<input type="password" id="clave" name="clave" size="20">
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>

<script>
window.addEventListener('load',inicio,false);

function inicio()
{
document.getElementById("formulario1").addEventListener('submit',validar,false);
}

function validar(evt)
{
var usu=document.getElementById("usuario").value;
var cla=document.getElementById("clave").value;
if (usu.length==0 || cla.length==0)
{
alert('El nombre de usuario o clave está vacío');
evt.preventDefault();
}
}
</script>

</body>
</html>

Ver ejemplo anterior

Lo primero que vemos es que en vez de inicializar la propiedad onload procedemos a llamar al método addEventListener:

window.addEventListener('load',inicio,false);

El primer parámetro es un string con el nombre del evento a inicializar, el segundo parámetro es el nombre de la función a ejecutar y el tercer parámetro normalmente es el valor false.

Cuando se carga completamente la página el objeto window tiene la referencia al método que se debe llamar, en nuestro caso se llama inicio. La función inicio obtiene la referencia del objeto formulario1 y procede a registrar el evento submit indicando en el segundo parámetro el nombre de la función que debe ejecutarse:

function inicio() { document.getElementById("formulario1").addEventListener('submit',validar,false);
}

El código de la función validar se modifica, llega como parámetro una referencia al evento y mediante este llamamos al método preventDefault si queremos que no se envíen los datos al servidor:

function validar(evt)
{
var usu=document.getElementById("usuario").value;
var cla=document.getElementById("clave").value;
if (usu.length==0 || cla.length==0)
{
alert('El nombre de usuario o clave está vacío');
evt.preventDefault();
}
}

Este modelo de eventos está siendo ampliamente implementado por los navegadores modernos. El problema es el IE8 o inferiores que no lo implementa de esta forma.

Evento DOMContentLoaded

Evento 'load': El evento load se dispara cuando el contenido del archivo HTML y las referencias a todos los recursos asociados (imágenes, hojas de estilo etc.) se han cargado en memoria del navegador.
Evento 'DOMContentLoaded': El evento DOMContentLoaded se dispara cuando el contenido del archivo HTML se ha cargado en el navegador, sin necesitar esperar imágenes, hojas de estilo etc.
Es muy conveniente en la mayoría de las veces inicializar script de JavaScript utilizando éste evento en lugar del evento 'load'. Todos los navegadores modernos disponen del evento 'DOMContentLoaded'.

En el problema anterior solo cambiamos la referencia del evento load por DOMContentLoaded:

<!DOCTYPE html>
<html>

<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>

<body>

<form method="post" action="procesar.php" id="formulario1">
Ingrese nombre:
<input type="text" id="usuario" name="usuario" size="20">
<br>
Ingrese clave:
<input type="password" id="clave" name="clave" size="20">
<br>
<input type="submit" id="confirmar" name="confirmar" value="Confirmar">
</form>

<script>
window.addEventListener('DOMContentLoaded', inicio, false);

function inicio() {
document.getElementById("formulario1").addEventListener('submit', validar, false);
}

function validar(evt) {
var usu = document.getElementById("usuario").value;
var cla = document.getElementById("clave").value;
if (usu.length == 0 || cla.length == 0) {
alert('El nombre de usuario o clave está vacío');
evt.preventDefault();
}
}
</script>

</body>

</html>

Ver ejemplo anterior

Eventos: onclick y ondblclick

Dos eventos que podemos capturar de cualquier elemento HTML son cuando un usuario hace un clic o un doble clic sobre el mismo.

El evento click se produce cuando el usuario hace un solo clic sobre el elemento HTML y suelta inmediatamente el botón del mouse en el mismo lugar y el dblclick cuando presiona en forma sucesiva en la misma ubicación.

onclick

El evento "onclick" se dispara cuando se presiona el botón de un dispositivo de entrada (Mouse o Mousepad) sobre un elemento. Esto se puede utilizar en todos los elementos html EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>

Sintaxis

En HTML:

En JavaScript:

object.onclick = function(){myScript};

Ejemplo

<!DOCTYPE html>
<html>
<body>

Campo1: <input type="text" id="Campo1" value="Hola Gente!"><br>
Campo2: <input type="text" id="Campo2"><br><br>

<button onclick="myFunction()">Copia Texto</button>

<p>Una función se activa cuando se hace clic en el botón. La función copia el texto de Campo1 en Campo2..</p>

<script>
function myFunction() {
document.getElementById("Campo2").value = document.getElementById("Campo2").value;
}
</script>

</body>
</html>

Ver ejemplo anterior

ondblclick

El evento "ondblclick" se dispara cuando se se haga doble clic en un elemento de entrada (Mouse o Mousepad) sobre un elemento. Esto se puede utilizar en todos los elementos html EXCEPTO: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> y <title>

Sintaxis

En HTML:

En JavaScript:

object.ondblclick = function(){myScript};

Ejemplo

<!DOCTYPE html>
<html>
<body>

<p>Este ejemplo usa el método addEventListener () para adjuntar un evento "dblclick" al elemento ap.</p>
<p id="demo">Haga Doble Click aqui</p>

function myFunction() {
document.getElementById("demo").innerHTML = "Usted hizo doble click!";
}

</script>

</body>
</html>

Ver ejemplo anterior

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<div style="width:200px;height:200px;background:#ffff00" id="recuadro1">
Prueba del evento click
</div>
<div style="width:200px;height:200px;background:#ff5500" id="recuadro2">
Prueba del evento dblclick
</div>
<script>
addEventListener('DOMContentLoaded',inicio,false);
function inicio()
{
document.getElementById('recuadro1').addEventListener('click',presion1,false);
document.getElementById('recuadro2').addEventListener('dblclick',presion2,false);
}

function presion1()
{
alert('se hizo click');
}

function presion2()
{
alert('se hizo doble click');
}
</script>
</body>
</html>

Ver ejemplo anterior