Los eventos son acciones que hace que se dispare una función. Prácticamente el evento puede ser una acción cualquiera por ejemplo el evento clic, focus, etc. a continuación se aliste los eventos para el uso en Javascript:
Tipo de evento | Nombre con prefijo on (eliminar cuando proceda) | Descripción |
Relacionados con el ratón | onclick | Click sobre un elemento |
ondblclick | Doble click sobre un elemento | |
onmouseover | Se pulsa un botón del ratón sobre un elemento | |
onmouseenter | El puntero del ratón entra en el área de un elemento | |
onmouseleave | El puntero del ratón sale del área de un elemento | |
onmousemove | El puntero del ratón se está moviendo sobre el área de un elemento | |
onmouseover | El puntero del ratón se sitúa encima del área de un elemento | |
onmouseout | El puntero del ratón sale fuera del área del elemento o fuera de uno de sus hijos | |
onmouseup | Un botón del ratón se libera estando sobre un elemento | |
contextmenu | Se pulsa el botón derecho del ratón (antes de que aparezca el menú contextual) | |
Relacionados con el teclado | onkeydown | El usuario tiene pulsada una tecla (para elementos de formulario y body) |
Relacionados con el teclado | onkeypress | El usuario pulsa una tecla (momento justo en que la pulsa) (para elementos de formulario y body) |
Relacionados con el teclado | onkeyup | El usuario libera una tecla que tenía pulsada (para elementos de formulario y body) |
Relacionados con formularios | onfocus | Un elemento del formulario toma el foco |
Relacionados con formularios | onblur | Un elemento del formulario pierde el foco |
Relacionados con formularios | onchange | Un elemento del formulario cambia |
Relacionados con formularios | onselect | El usuario selecciona el texto de un elemento input o textarea |
Relacionados con formularios | onsubmit | Se pulsa el botón de envío del formulario (antes del envío) |
Relacionados con formularios | onreset | Se pulsa el botón reset del formulario |
Hay varias formas para utilizar estos eventos:
Del lado del HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eventos en JavaScript</title> </head> <body> <input type="text" onfocus="Evento01()"> <button onclick="Evento01()">Aceptar</button> </body> </html>
<script> function Evento01() { console.log("Accion del evento"); } </script>
Utilizando los eventos directamente desde los controles.
Otra forma es asignando un Id al control
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Eventos en JavaScript</title> </head> <body> <input type="text" id="TxtPrueba"> </body> </html>
<script> function Evento01() { console.log("Accion del evento"); } var ObjetoEvento = document.getElementById("TxtPrueba"); ObjetoEvento.addEventListener("keypress", Evento01); </script>
No se utiliza la palabra ya que ‘on’ se utiliza del lado del HTML.