Como todo elemento en un documento HTML tiene sus eventos y también eventos especiales para cada elementos en el caso de controles de formularios, veamos un serie de ejemplos.

Crearemos un formulario con todos los eventos asociados a los controles del formulario por ejemplo:

Veamos el código del ejemplo: 

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Mi titulo</title>
</head>

<body>
    <!-- los eventos del raton sobre el elemento div -->

    <div style="width: 300px; height: 300px; background-color: blue;" onclick="alert('Has presionado click')" ondblclick="alert('Has presionado doble click');" onmousedown="alert('se presiono un click')" onmouseup="alert('se dejo de presionar el click')" onmousemove="alert('se mueve el puntero sobre esta zona')" onmouseover="alert('Cursor encima del elemento')" onmouseout="alert('cursos sale del elemennto')">

    </div>

</body>

</html>

Veamos en un formulario y sus controles como actúan los eventos.

Aquí un programa cuando entra el foco en el campo de texto y sale del foco, también cuando cambia de valor, y detecta el valor de la tecla presionada en código ASCCI. 

<!DOCTYPE>
<html lan="es">

<head>
    <meta charset="UTF-8">
    <title>Mi titulo</title>
    <script type="text/javascript">
        function presionaTecla(e) {
            // TENER EN CUENTA QUE PRIMERO SE EJECUTA EL EVENTO ONSUBMIT DEL FORM Y LUEGO EL ONCLICK DEL BOTÓN
            // aquí muestra en código ASCII la tecla presionada
            //alert(e.keyCode);
            // verificia si se presiono la tecla Alrt
            if (e.ctrlKey) {
                alert("se presiono el Alt");
            }

        }
    </script>

    <body>

        <form id="form1" name="form1" method="post" action="" onsubmit="alert('enviando formulario')" onreset="">

            <label for="nombre">Ingrese Nombre:</label>
            <input type="text" id="nombre" name="nombre" onkeydown="" onkeyup="presionaTecla(event)" onkeypress="" onfocus="aler('toma el foco el control')" onblur="alert('sale del foco el formulario')" onchange="alert('cambio el valor del campo de texto')" />

            <input type="submit" id="boton" name="boton" value="Enviar">

        </form>

    </body>

</html>

Veamos a ver cómo cancelar las acciones de un hipervinculo.

Veamos el código de ejemplo: 

<!DOCTYPE>
<html lan="es">

<head>
    <meta charset="UTF-8">
    <title>Mi titulo</title>
    <script type="text/javascript">
        function preguntar() {
            // tener en cuenta que primero se ejecuta el evento onclick y luego la accion del enlace
            var respuesta = confirm("¿Deseas ir al sitio Google?");
            return respuesta;
        }
    </script>

    <body>
        <a href="http://www.google.com.pe" onclick="return preguntar()">Click para ir a Google</a>
    </body>

</html>

Por último a todo lo repasado a los eventos

Vamos a confeccionar un programa que tenga tres botones que indica el color del fondo de la página. 

<!DOCTYPE>
<html lan="es">

<head>
    <meta charset="UTF-8">
    <title>Mi titulo</title>
    <script type="text/javascript">
        function cambiarColor(valor) {
            // accedemos al elemento del body por su indentificador y cambios su valor
            document.getElementById('cuerpo').style.backgroundColor = valor;
        }
    </script>

    <body id="cuerpo">

        <h2>Titulo de la pagina</h2>

        <input type="button" value="Azul" onclick="cambiarColor('blue')" />

        <input type="button" value="Verde" onclick="cambiarColor('green')" />
        <input type="button" value="Rojo" onclick="cambiarColor('red')" />

    </body>

</html>

Y así de simple es el uso de eventos en los controles y formularios.

nota