Toda acción que realiza el usuario en el navegador -pulsar un bóton, cargar una página, mover el ratón, escribir texto, etc- se conoce como evento. Podemos crear código para que responda a un evento especifico, quizás deseamos un mensaje "Hola [mi nombre]" al pulsar un botón. Listamos algunos eventos comunmente usados con JavaScript y a continuación veremos un ejemplos prácticos:
- onblur: Cuando un elemento pierde el foco.
- onchange: Cuando el contenido de un elemento cambia.
- onclick: Cuando se da un clic en un elemento.
- ondblclick: Cuando se da doble clic en un elemento.
- onerror: Cuando hay un error en JavaScript.
- onfocus: Cuando un elemento tiene el foco.
- onkeydown: Cuando se presiona una tecla.
- onkeypress: Cuando se tiene presionado una tecla.
- onkeyup: Cuando se suelta una tecla.
- onload: Cuando se carga la página.
- onmousedown: Cuando se presiona un botón del ratón.
- onmousemove: Cuando se mueve el ratón en la página.
- onmouseout: Cuando se mueve el ratón fuera de un elemento.
- onmouseover: Cuando se mueve el ratón sobre un elemento.
- onmouseup: Cuando se suelta un botón del ratón.
- onreset: Cuando se presiona el botón Reset.
- onresize: Cuando se redimenciona la página o un elemento.
- onsubmit: Cuando se presiona el botón Submit.
- onunload: Cuando sale de la página actual o cambia a otra página.
Cada uno de estos eventos dependará de la etiqueta HTML que estemos usando. Por ejemplo, no podemos aplicar el evento onsubmit a un botón(input tipo button) porque este evento se usa especificamente con la etiqueta form.
Ejemplos de algunos Eventos
Ejemplo 01: Cambiando el color de fondo
Cambiaremos el color de fondo de la página al pulsar en el botón correspondiente. Note el evento onclick.
<html> <head> <title>Aprendiendo JavaScript</title> </head> <body> <h1>Estoy aprendiendo JavaScript</h1> <form name="formulario" action=""> <input type="button" value="Rojo" onclick="document.bgColor='red'" /> <input type="button" value="Azul" onclick="document.bgColor='blue'" /> <input type="button" value="Verde" onclick="document.bgColor='green'" /> </form> </body> </html>
Ejemplo 02: Cuando presionamos alguna tecla
Diversos eventos al momento de escribir algun texto, aunque a simple vista parece tener el mismo efecto, son diferentes eventos: onkeypress, onkeydown y onkeyup. Nota: Usamos confirm para mostrar un mensaje en una pequeña ventana del navegador. La forma de usarlo es: confirm(‘mi mensaje’).
<html>
<head>
<title>Aprendiendo JavaScript</title>
</head>
<body>
<h1>Distintas interacciones al presionar una tecla</h1>
<form name="formulario" action="">
<p>Aca muestra el mensaje cuando presionamos una tecla - <strong>onkeypress</strong> </p>
<input type="text" onkeypress="confirm('Evento onkeypress')" />
<p>Muestra el mensaje cuando tenemos presionado la tecla - <strong>onkeydown</strong> </p>
<input type="text" onkeydown="confirm('Evento onkeydown')" />
<p>Muestra el mensaje cuando soltamos la tecla - <strong>onkeyup</strong> </p>
<input type="text" onkeyup="confirm('Evento onkeyup')" />
</form>
</body>
</html>
hola me gustaria que publicaran ejemplo de validacion de datos osea cajas de texto validadas. pero que no sean con un alert sino algo diferente. logico con ajax. ojala y lo publicaran. saludos……..
hola, me gustaría saber sobre estos eventos de html, pero por medio de php osea, que cuando yo haga click en un botón, en la página aparezca un título por ejemplo:
—–OnClick del botón—–
——————————-
cuando yo suma un botón, aparezca Hola Mundo en la página. gracias
Necesito que publiquen una funcion para validar cuando le hago clik al boton izquierdo del mouse…
lo que pasa es que tengo una, pero me lo toma en toda la pagina y yo solo quiero que me lo tome el boton