11. Eventos

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.