6.1 Objeto evento
JavaScript proporciona un potente sistema de eventos, que permite seguir diversas acciones del usuario y otros eventos que ocurren en el navegador. Un aspecto importante del trabajo con eventos es el objeto evento, que contiene información sobre el evento y proporciona métodos para su manejo.
Cuando ocurre un evento, el navegador crea un objeto evento que contiene información sobre dicho evento. Este objeto se pasa al manejador del evento como argumento.
Propiedades del objeto evento:
type: tipo de evento (por ejemplo,click,keydown).target: elemento en el que ocurrió el evento.currentTarget: elemento al que está vinculado el manejador del evento.eventPhase: fase en la que se encuentra el evento (captura, objetivo, burbujeo).bubbles: valor booleano que indica si el evento puede burbujear.cancelable: valor booleano que indica si el evento se puede cancelar.defaultPrevented: valor booleano que indica si se ha prevenido la acción por defecto.timeStamp: momento en que se creó el evento.isTrusted: valor booleano que indica si el evento fue iniciado por el usuario o por un script.
Métodos del objeto evento:
preventDefault(): cancela la acción por defecto asociada con el evento.stopPropagation(): detiene la propagación adicional del evento.stopImmediatePropagation(): detiene la propagación adicional del evento y previene la ejecución de otros manejadores de eventos para el elemento actual.
Ejemplo de uso del objeto evento:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Event Object Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Event type:', event.type); // Mostrará: click
console.log('Event target:', event.target); // Mostrará: <button id="myButton">Click me</button>
console.log('Current target:', event.currentTarget); // Mostrará: <button id="myButton">Click me</button>
console.log('Event phase:', event.eventPhase); // Mostrará: 2 (Fase objetivo)
console.log('Bubbles:', event.bubbles); // Mostrará: true
console.log('Cancelable:', event.cancelable); // Mostrará: true
console.log('Time stamp:', event.timeStamp); // Mostrará el tiempo en milisegundos
console.log('Is trusted:', event.isTrusted); // Mostrará: true
});
</script>
</body>
</html>
6.2 Eventos de clics (Mouse Events)
Eventos del ratón se generan cuando el usuario interactúa con un elemento usando el ratón:
click: evento de clicdblclick: evento de doble clicmousedown: evento de presión de botón del ratónmouseup: evento de liberación de botón del ratónmousemove: evento de movimiento del ratónmouseover: evento de pasar el ratón por encimamouseout: evento de sacar el ratón
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events Example</title>
</head>
<body>
<button id="myButton">Click Me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
console.log('Button clicked');
console.log('Event type:', event.type);
console.log('Target element:', event.target);
});
</script>
</body>
</html>
6.3 Eventos de carga (Load Events)
Eventos de carga ocurren cuando un recurso termina de cargarse:
load: evento que ocurre cuando un recurso/página está completamente cargadoDOMContentLoaded: evento que ocurre cuando la documentación HTML inicial está cargada y analizada sin esperar la carga completa de hojas de estilo, imágenes e iframes
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Load Events Example</title>
</head>
<body>
<script>
window.addEventListener('load', function(event) {
console.log('Window fully loaded');
});
document.addEventListener('DOMContentLoaded', function(event) {
console.log('DOM fully loaded and parsed');
});
</script>
</body>
</html>
6.4 Eventos de enfoque (Focus Events)
Eventos de enfoque se generan cuando un elemento recibe o pierde foco.
focus: evento que ocurre cuando un elemento recibe focoblur: evento que ocurre cuando un elemento pierde foco
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Focus Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('focus', function(event) {
console.log('Input field focused');
});
input.addEventListener('blur', function(event) {
console.log('Input field lost focus');
});
</script>
</body>
</html>
6.5 Eventos de teclado (Keyboard Events)
Eventos de teclado se generan cuando el usuario presiona teclas en el teclado:
keydown: evento que ocurre cuando una tecla es presionadakeyup: evento que ocurre cuando una tecla es soltadakeypress: evento que ocurre cuando una tecla es presionada y soltada (evento obsoleto, no recomendado para uso)
Ejemplo:
HTML
<html>
<head>
<title>Keyboard Events Example</title>
</head>
<body>
<input type="text" id="textInput" placeholder="Type something...">
<script>
const input = document.getElementById('textInput');
input.addEventListener('keydown', function(event) {
console.log('Key down:', event.key);
});
input.addEventListener('keyup', function(event) {
console.log('Key up:', event.key);
});
</script>
</body>
</html>
GO TO FULL VERSION