Eventos Básicos en JavaScript

Mensaje al pasar el raton sobre un enlace

Pasa el ratón por encima del enlace

y podrás ver un mensaje.

<h2>Mensaje al pasar el raton sobre un enlace</h2>
<p>Pasa el ratón por encima del enlace </p>
<a href="http://www.uterra.com" 
ONMOUSEOVER="javascript:alert('Estas en UTERRA.COM ¿que tal estas?');return false">UTERRA.COM
</a> 
<p>y podrás ver un mensaje.</p>    

Eventos del Párrafo

• mouseover: Se activa cuando el cursor del mouse se encuentra sobre el párrafo. Cambia el color del texto a rojo, el fondo a amarillo, aumenta el tamaño de la fuente a 1.5em y agrega un padding de 5px.
• mouseout: Se activa cuando el cursor del mouse sale del área del párrafo. Restablece el color del texto a negro.

Evento del Botón

• click: Se activa cuando el usuario hace clic en el botón. Muestra un cuadro de alerta que informa al usuario que ha hecho clic en el botón.

Eventos del Campo de Texto

• focus: Se activa cuando el campo de texto recibe el foco. Cambia el color de fondo a un amarillo claro.
• blur: Se activa cuando el campo de texto pierde el foco. Restablece el color de fondo a blanco.
• change: Se activa cuando el valor del campo de texto cambia. Muestra un cuadro de alerta que informa al usuario que el valor del campo ha cambiado.

Ejecución del código en el navegador

Pasa el ratón por encima de este párrafo o haz clic en el botón.

Código js

<script>
    // Eventos del párrafo
    const parrafo = document.getElementById('parrafo');
    
    parrafo.addEventListener('mouseover', function() {
        parrafo.style.color = "red";
        parrafo.style.background = "yellow";
        parrafo.style.fontSize = "1.5em";
        parrafo.style.padding = "5px";
    });

    parrafo.addEventListener('mouseout', function() {
        parrafo.style.color = "black";
    });

    // Evento del botón
    const boton = document.getElementById('boton');
    
    boton.addEventListener('click', function() {
        alert("Has hecho clic en el botón");
    });

    // Evento del campo de texto
    const inputField = document.getElementById('inputField');
    
    inputField.addEventListener('focus', function() {
        inputField.style.backgroundColor = "lightyellow";
    });

    inputField.addEventListener('blur', function() {
        inputField.style.backgroundColor = "white";
    });

    inputField.addEventListener('change', function() {
        alert("El valor del campo ha cambiado");
    });
</script>

Texto-Foco

    <h2>Texto-Foco</h2>
    <form>
        <input type="text" name="txt" size="30" value="¡Hola mundo!"> 
        <input type="button" value="Selecciona texto" onclick="setfocus()"> 
    </form>
    

    <script type="text/javascript">
        function setfocus() {
                document.forms[0].txt.focus();
                }
        </script>