122 lines
4.3 KiB
HTML
122 lines
4.3 KiB
HTML
<!Doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>EVENTOS DOM</title>
|
|
<style>
|
|
#miElemento {
|
|
color:green;
|
|
font-size:2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="miElemento"><p>Hola tengo aplicado un evento</p></div>
|
|
<script>
|
|
/*
|
|
Manejo del DOM (Document Object Model) en JavaScript.
|
|
Usos habituales incluyen:
|
|
|
|
Manipulación de Contenido: Cambiar, agregar o eliminar elementos HTML en respuesta a eventos o acciones del usuario.
|
|
|
|
Actualización de Estilos: Modificar propiedades de estilo CSS para cambiar la apariencia de elementos en la página.
|
|
|
|
Manejo de Eventos: Asociar funciones JavaScript a eventos como clics, cambios, y teclas presionadas.
|
|
|
|
Validación de Formularios: Verificar y validar datos de entrada en formularios antes de enviarlos al servidor.
|
|
|
|
Animaciones y Transiciones: Crear efectos visuales mediante cambios graduales en propiedades CSS usando JavaScript.
|
|
|
|
Creación de Elementos Dinámicamente: Generar y agregar nuevos elementos HTML al DOM según sea necesario.
|
|
|
|
*/
|
|
/*
|
|
Manejo de eventos:
|
|
|
|
Identificación del Elemento: Selecciona el elemento HTML al que deseas asociar un evento. Puedes hacer esto usando métodos como document.getElementById, document.querySelector, etc.
|
|
|
|
Asociación del Evento: Utiliza un método de asociación de eventos, como addEventListener, para vincular una función de JavaScript al evento específico del elemento.
|
|
*/
|
|
|
|
//Selección del Elemento:
|
|
const miElemento = document.getElementById('miElemento');
|
|
//Uso de addEventListener:
|
|
miElemento.addEventListener('click', miFuncion);
|
|
|
|
//Definición de la Función:
|
|
function miFuncion() {
|
|
// Código a ejecutar cuando se produce el evento
|
|
|
|
if (miElemento.style.color === "green") {
|
|
miElemento.style.color="blue";
|
|
} else {
|
|
miElemento.style.color="green";
|
|
}
|
|
}
|
|
|
|
//Cuando ocurre el evento (por ejemplo, un clic del mouse en el elemento), la función asociada se ejecuta automáticamente.
|
|
|
|
/*
|
|
Eventos de Ratón:
|
|
click: Se activa cuando se hace clic en un elemento.
|
|
dblclick: Se activa cuando se hace doble clic en un elemento.
|
|
mousedown: Se activa cuando se presiona el botón del ratón.
|
|
mouseup: Se activa cuando se suelta el botón del ratón.
|
|
mousemove: Se activa cuando se mueve el ratón sobre un elemento.
|
|
|
|
Eventos de Teclado:
|
|
keydown: Se activa cuando se presiona una tecla.
|
|
keyup: Se activa cuando se suelta una tecla.
|
|
keypress: Se activa cuando se mantiene presionada una tecla.
|
|
|
|
Eventos de Formulario:
|
|
submit: Se activa cuando se envía un formulario.
|
|
change: Se activa cuando el valor de un elemento de formulario cambia.
|
|
input: Se activa cuando se introduce texto en un campo de entrada.
|
|
|
|
Eventos de Documento:
|
|
DOMContentLoaded: cuando el documento HTML ha sido completamente cargado y analizado(sin imágenes y estilos).
|
|
|
|
Eventos de Ventana:
|
|
resize: Se activa cuando la ventana del navegador se redimensiona.
|
|
scroll: Se activa cuando se desplaza la barra de desplazamiento de la ventana.
|
|
|
|
Eventos de foco:
|
|
focus: Se activa cuando un elemento recibe el foco.
|
|
blur: Se activa cuando un elemento pierde el foco.
|
|
|
|
Eventos de Arrastre:
|
|
dragstart: Se activa cuando se inicia el proceso de arrastre de un elemento.
|
|
dragend: Se activa cuando se completa el proceso de arrastre de un elemento.
|
|
|
|
Eventos de Tiempo:
|
|
setTimeout: Permite ejecutar una función después de un cierto tiempo de espera.
|
|
setInterval: Permite ejecutar una función repetidamente cada cierto intervalo de tiempo.
|
|
|
|
Eventos de Historial de Navegación:
|
|
popstate: Se activa cuando el historial de navegación cambia.
|
|
|
|
Eventos de Animación:
|
|
animationstart: Se activa cuando una animación CSS comienza.
|
|
animationend: Se activa cuando una animación CSS termina.
|
|
|
|
Eventos de Red:
|
|
online: Se activa cuando el dispositivo se conecta a internet.
|
|
offline: Se activa cuando el dispositivo pierde la conexión a internet.
|
|
|
|
Eventos de Geolocalización:
|
|
geolocation: la posición geográfica del dispositivo cambia.
|
|
|
|
Eventos de Escritura táctil:
|
|
touchstart: Se activa cuando se toca la pantalla.
|
|
touchend: Se activa cuando se levanta el dedo de la pantalla.
|
|
|
|
Eventos de Clipboard:
|
|
cut: Se activa cuando se corta contenido en el portapapeles.
|
|
copy: Se activa cuando se copia contenido en el portapapeles.
|
|
paste: Se activa cuando se pega contenido desde el portapapeles.
|
|
*/
|
|
|
|
</script>
|
|
</body>
|
|
</html> |