Lista de atributos de eventos de Javascript 5g3tu

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 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 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 5g3tu

• 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? 4k4e24

Los siguientes eventos del ratón reaccionan a diferentes acciones del , 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 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>

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

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.')">

¿Cómo usar los eventos onfocus y onblur de Javascript? 5n3x5v

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? a4x3n

Los eventos onload y onunload se utilizan para definir cuando una página o imagen terminan de cargar completamente y cuando el 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 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 112l32

Onload es ampliamente utilizado en las páginas de internet por dos motivos:
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? 2r2t2z

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? 6n5m4

El evento onselect permite realizar una accion cuando el 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? 3i2x1v

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 6khl