NorfiPC

Atributos de eventos de Javascript códigos y ejemplos prácticos

Tweet

Los eventos son acciones determinadas que Javascript puede detectar, y los objetos de eventos aportan la información de que evento ha ocurrido, estos pueden haber sido provocados por la acción del usuario o por el propio dinamismo de la página.
Son muy usado para ejecutar funciones que no serán iniciadas hasta que el evento se ejecute.
Los atributos de eventos pueden ser insertados en diferentes elementos HTML para definir los eventos que ocurran, lo que facilitan la ejecución de funciones de diferentes maneras, haciendo que las páginas web ganen en dinamismo, fluidez y facilitar al usuario interactuar con el contenido.

Lista de atributos de eventos de Javascript

• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup
• onfocus
• onblur
• onload
• onunload
• onchange
• onselect

Como usar los eventos del ratón o mouse de Javascript

Los siguientes eventos del ratón reaccionan a diferentes acciones del usuario, pueden ser insertados en cualquier elemento HTML de bloque.

onclick	Al dar un clic con el botón izquierdo del ratón sobre un elemento
ondblclick	Dar doble clic sobre un elemento
onmousedown	Cualquier botón del ratón es presionado sobre un elemento
onmouseup	Se libera un botón del ratón sobre un elemento
onmouseover	Solo situar el ratón sobre un elemento
onmousemove	Mover el ratón
onmouseout	Es retirado el ratón de un elemento

Ejemplos de códigos que se pueden emplear en cualquiera de los eventos de ratón, es posible insertarlos en cualquier elemento de bloque HTML.

<a href="#" onclick="FUNCIÓN">VÍNCULO</a>
<div onclick="FUNCIÓN">TEXTO</div>
<h2 onclick="FUNCIÓN">Encabezado</h2>
<pre onclick="FUNCIÓN">Código</pre>

Los eventos del ratón pueden utilizarse para la creación de una infinidad de efectos, desde diferentes estilos del puntero, mensajes, menús personalizados para el clic derecho, etc., no se deben usar de forma indiscriminada para hacer saltar molestas alertas, principalmente con el evento onmouseover.
Dos ejemplos son los siguientes:
En los vínculos se usa a menudo el evento onclick para mostrar un cuadro de dialogo con un mensaje de información o una confirmación, antes de enviar al usuario al destino solicitado, por ejemplo el primer vinculo solo muestra un mensaje, el segundo ofrece información y da la alternativa de permanecer en la misma página:
Los códigos utilizados son:

<a href="http://google.com" 
onclick="alert('Este link te dirige a Google.com')">Google.com</a>

<a href="#" 
onclick="javascript:if(confirm('Este link te dirige a Google.com')) 
{parent.location='http://google.com'}else{''};">Google</a>

Como usar los eventos del teclado de Javascript

Los siguientes eventos de teclado se pueden insertar en casi cualquier elemento HTML.

onkeypress	Presionar una tecla del teclado y soltarla
onkeydown	Presionar una tecla del teclado y soltarla
onkeyup	Liberar una tecla

Ejemplos:




Códigos usados en los ejemplos:

<input type="text" value="onkeypress" onkeypress="alert('Haz soltado una tecla.')" />
<input type="text" value="onkeydown" onkeydown="alert('Haz presionado una tecla.')"/>
<input type="text" value="onkeyup" onkeyup="alert('Haz liberado una tecla.')"/>

Como usar los eventos onfocus y onblur de Javascript

Los eventos onfocus y onblur se utilizan en los elementos HTML: a, textarea, area, button, label, input y select para desencadenar una accion cuando tengan el focus (la atencion y reciben lo que se escriba), o cuando lo pierdan.


• onfocus Un elemento obtiene el focus
• onblur Un elemento pierde el focus

Código usado en el ejemplo anterior:

<input type="text" value="" 
onfocus="value='Tengo el focus';style.backgroundColor='yellow';" 
onblur="value='Perdi el focus';style.backgroundColor='#ddd';" />

Como usar los eventos onload y onunload de Javascript

Los eventos onload y onunload se utilizan para definir cuando una página o imagen terminan de cargar completamente y cuando el usuario abandona la página respectivamente.
Se pueden usar solo en las etiquetas body e img y en el objeto window
Por ejemplo, el siguiente código permite mostrar un mensaje de bienvenida cuando el usuario carga la página y muestra otro de despedida cuando la abandona.

<body onload="saludo()" onunload="despedida()">
<script type="text/javascript">
function saludo() {alert('Bienvenido a la página de Javascript')}
function despedida() {alert('Gracias por tu visita')}
</script>

El evento onload es ampliamente utilizado por los programadores en el código de las páginas web, ya que su característica permite iniciar funciones que de usarlas de otra forma retardarían la velocidad de carga de la página. Es usado comúnmente para iniciar scripts, cargar imágenes grandes, películas flash, insertar iframes que cargan otras páginas, escribir vínculos de afiliados, etc. en todos los casos onload nos asegura que se muestra perfectamente al usuario el contenido de la página mientras de forma secundaria se van cargando los elementos adicionales que la componen.
El evento onload para iniciar funciones en la página se puede insertar de dos formas:

• Insertándolo en la etiqueta <body>:

<body onload="funcion()">

• En un script:

<script type="text/javascript">
window.onunload=funcion();
</script>

Como iniciar diferentes funciones con el evento onload

Mediante onload se puede iniciar varias funciones de forma simultánea, hazlo de cualquiera de las dos formas pero es aconsejado usar el segundo método siempre en el final de la página, justo antes del cierre de la etiqueta </body>.

<body onload="FUNCIÓN1();FUNCIÓN2();FUNCIÓN3()">

<script type="text/javascript">
function start() {FUNCIÓN1();FUNCIÓN2();FUNCIÓN3()}
window.onload = start;
</script>

Como usar el evento onselect de Javascript

El evento onselect permite realizar una accion cuando el usuario seleccione algún texto, se puede utilizar en los elementos HTML <input type="text"> y <textarea>.

Prueba el siguiente ejemplo:


Código usado en el ejemplo:

<input type="text" value="onselect"
onselect="alert('Haz seleccionado texto')"/>

Como usar el evento onchange de Javascript

El evento onchange ejecuta una acción al cambiar el contenido de una entrada de texto, puede usarse en las etiquetas <input type="text">, <select> y <textarea>

Pruébalo en el siguiente ejemplo:


Es utilizado el siguiente código:

<input type="text" value="onchange" onchange="style.backgroundColor='red';" />

Todos los eventos anteriores validan perfectamente en XHTML, existen otros como: onresize que ejecuta una acción al modificar el tamaño de una ventana, onerror que indica que ocurre un error al cargar un documento o imagen.
Ambos no validan en esta especificación.

---

Páginas relacionadas