NorfiPC
NorfiPC » Informaciones utiles » Lista de eventos de Javascript

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

Lista con los eventos más usados en Javascript para insertar en los elementos HTML de las páginas web, que permiten iniciar funciones mediante diferentes acciones efectuadas con el ratón, el teclado, al seleccionar texto, cargar la página, etc. Códigos y ejemplos prácticos para agregarle interacción y dinamismo a las páginas.
Atributos de eventos de Javascript 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 facilitan al usuario interactuar con el contenido.
En este artículo se muestra cómo usar en la práctica los eventos más comunes para ejecutar funciones.



Lista de atributos de eventos de Javascript


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

¿Cómo 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:
Google.com
Google.com
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>



¿Cómo usar los eventos del teclado de Javascript?


Los siguientes eventos de teclado se pueden insertar en casi cualquier elemento HTML.
onkeypressPresionar una tecla del teclado y soltarla
onkeydownPresionar una tecla del teclado y soltarla
onkeyupLiberar 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.')">



¿Cómo 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';">



¿Cómo 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
onload = Una página o imagen termina de cargar
onunload = El usuario abandona la página
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>
Los eventos onload y onunload se pueden insertar de dos formas:

• Insertándolo en la etiqueta <body>:
<body onload="funcion()">

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



Importancia y usos prácticos de Onload


Onload es ampliamente utilizado en las páginas de internet por dos motivos:
✓ Cargar elementos pesados como imágenes, flash o videos, pero solo después que la página se muestre completamente en el navegador, de esa forma se hace las páginas muy rápidas.
✓ Cargar elementos que se desea que no sean rastreados por los buscadores, como iframes con publicidad (marcos), vínculos a sitios de afiliados y otros por alguna razón. De esa forma estos elementos son escritos solo después que la página concluya de cargar completamente.
Con el siguiente script se escribe un vínculo en una página usando Onload.
El contenedor se puede usar en la zona exacta de la página donde se necesita escribir el link.
<div id="lk"></div>

<script type="text/javascript">
function esclinks(){
document.getElementById('lk').innerHTML='<a href="http://sitioweb">Entra a mi sitio</a>'; }
window.onload=function(){
esclinks();}
</script>



¿Cómo iniciar funciones diferentes 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>

¿Cómo 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')">

¿Cómo 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 HTML5, 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