Resumen de los Eventos Básicos en JavaScript Aplicados al DOM

Los eventos en JavaScript son acciones o sucesos que ocurren en el navegador, y que pueden ser detectados y manejados para que el código responda a ellos. Estos eventos son fundamentales para la interactividad en las páginas web y están vinculados a elementos del DOM (Document Object Model). Los eventos más básicos y utilizados incluyen clics de botones, cambios de formularios, carga de la página, entre otros.

Eventos Básicos Más Usados y Útiles en JavaScript:

1. click

Descripción: Ocurre cuando el usuario hace clic en un elemento, como un botón o un enlace.

element.addEventListener('click', function() {
    alert("Has hecho clic!");
});

2. dblclick

Descripción: Ocurre cuando el usuario hace doble clic en un elemento.

element.addEventListener('dblclick', function() {
    alert("Has hecho doble clic!");
});

3. mouseover

Descripción: Se activa cuando el usuario mueve el puntero del ratón sobre un elemento.

element.addEventListener('mouseover', function() {
    element.style.backgroundColor = "yellow";
});

4. mouseout

Descripción: Ocurre cuando el puntero del ratón sale del área de un elemento.

element.addEventListener('mouseout', function() {
    element.style.backgroundColor = "white";
});

5. keydown

Descripción: Se dispara cuando una tecla es presionada.

document.addEventListener('keydown', function(event) {
    console.log("Tecla presionada: " + event.key);
});

6. keyup

Descripción: Se dispara cuando una tecla es soltada.

document.addEventListener('keyup', function(event) {
    console.log("Tecla liberada: " + event.key);
});

7. change

Descripción: Se dispara cuando el valor de un input, select o textarea cambia.

document.getElementById('inputField').addEventListener('change', function() {
    alert("El valor ha cambiado!");
});

8. submit

Descripción: Se dispara cuando un formulario es enviado.

document.getElementById('form').addEventListener('submit', function(event) {
    event.preventDefault(); // Previene el envío del formulario
    alert("Formulario enviado");
});

9. load

Descripción: Ocurre cuando un recurso, como una imagen o una página completa, ha terminado de cargarse.

window.addEventListener('load', function() {
    alert("La página ha terminado de cargar!");
});

10. focus

Descripción: Se activa cuando un campo de entrada (input) gana el foco.

input.addEventListener('focus', function() {
    input.style.backgroundColor = "lightblue";
});

11. blur

Descripción: Ocurre cuando un elemento de entrada pierde el foco.

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

12. resize

Descripción: Ocurre cuando el tamaño de la ventana del navegador cambia.

window.addEventListener('resize', function() {
    console.log("La ventana ha cambiado de tamaño.");
});