Eventos

INICIO

Eventos Comunes

1. Evento `click`

Se activa cuando un elemento (como un botón o enlace) es clicado por el usuario. Este evento es comúnmente utilizado para desencadenar acciones, como mostrar un mensaje o enviar un formulario.

document.getElementById("myButton").addEventListener("click", function() { alert("Botón clicado!"); });

2. Evento `load`

Se dispara cuando un recurso (como una imagen o una página) se ha cargado completamente. Es útil para ejecutar código una vez que todos los elementos de la página están disponibles.

window.addEventListener("load", function() { console.log("La página ha sido completamente cargada."); });

3. Evento `mouseover`

Se activa cuando el puntero del mouse entra en el área de un elemento, utilizado comúnmente para crear efectos visuales, como resaltar un botón.

document.getElementById("myDiv").addEventListener("mouseover", function() { this.style.backgroundColor = "yellow"; });

4. Evento `mouseout`

Se dispara cuando el puntero del mouse sale del área de un elemento. Se utiliza para revertir cambios de estilo realizados con el evento `mouseover`.

document.getElementById("myDiv").addEventListener("mouseout", function() { this.style.backgroundColor = "lightblue"; });

5. Evento `submit`

Se activa cuando un formulario es enviado. Es útil para realizar validaciones o manejar el envío con JavaScript.

document.getElementById("myForm").addEventListener("submit", function(event) { event.preventDefault(); alert("Formulario enviado!"); });

6. Evento `focus`

Se activa cuando un elemento recibe el foco (por ejemplo, un campo de texto). Se utiliza para cambiar el estilo del elemento o proporcionar información adicional.

document.getElementById("myInput").addEventListener("focus", function() { this.style.borderColor = "blue"; });

7. Evento `change`

Se activa cuando el valor de un elemento cambia (como en `<input>` o `<select>`). Se utiliza para realizar acciones basadas en la nueva entrada del usuario.

document.getElementById("mySelect").addEventListener("change", function() { alert("Valor seleccionado: " + this.value); });

Ejemplos Prácticos

Evento load: Imágen cargada

Imagen de ejemplo

CODE

        <h2>Evento load</h2>
<img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/0d/ac/68/23.jpg" id="myImage" alt="Imagen de ejemplo">
        

        <script>
// Evento load
        document.getElementById("myImage").addEventListener("load", function() {
            alert("Imagen cargada");
        });
        </script>

Evento click


CODE

            <h2>Evento click</h2>
            <button id="btn">Haz clic</button>
            

            <script>
// Evento click
            document.getElementById("btn").addEventListener("click", function() {
            alert("Botón clicado");
        });

            </script>

Evento mouseover

Pasa el ratón por aquí

CODE

            <h2>Evento mouseover</h2>
            <div id="hoverDiv">Pasa el ratón por aquí</div>            
            

            <script>
// Evento mouseover
            document.getElementById("hoverDiv").addEventListener("mouseover", function() {
            this.style.backgroundColor = "green";
            this.style.color = "white";
        });
            </script>

Evento mouseout

Saca el ratón de aquí

CODE

                <h2>Evento mouseout</h2>
                <div id="hoverOutDiv">Saca el ratón de aquí</div>
                    

                <script>
    // Evento mouseout
                document.getElementById("hoverOutDiv").addEventListener("mouseout", function() {
                this.style.backgroundColor = "red";
                this.style.color = "yellow";
            });
                </script>

Eventos mouseover-mouseout


CODE

<h2>Evento mouseover 2</h2>
<li><a href="#"><img src="https://img.freepik.com/psd-gratis/3d-ilustracion-persona-gafas-sol_23-2149436188.jpg" 
                onmouseout="this.src='https://cms.imgworlds.com/assets/473cfc50-242c-46f8-80be-68b867e28919.jpg?key=home-gallery';" 
                onmouseover="this.src='https://tours.dailytravel.com/wp-content/uploads/tours_img_worlds_5.jpg';" /></a>
            </li>

Evento submit


CODE

            <h2>Evento submit</h2>
            <form id="form">
                <input type="text" name="name" placeholder="Nombre">
                <button type="submit">Enviar</button>
            </form>
            

            <script>
// Evento submit
            document.getElementById("form").addEventListener("submit", function(event) {
            event.preventDefault();  // Prevenir envío
            alert("Formulario enviado");
        });
            </script>

Evento focus


CODE

            <h2>Evento focus</h2>
            <input type="text" id="focusInput" placeholder="Haz clic aquí">
    
            

            <script>
// Evento focus
            document.getElementById("focusInput").addEventListener("focus", function() {
            this.style.backgroundColor = "yellow";
        });

            </script>

Evento change


CODE

            <h2>Evento change</h2>
            <select id="mySelect">
                <option value="1">Opción 1</option>
                <option value="2">Opción 2</option>
            </select>
            

            <script>
// Evento change
            document.getElementById("mySelect").addEventListener("change", function() {
            alert("Valor seleccionado: " + this.value);
        });

            </script>