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.
![]()