Manejo de eventos en JavaScript

Articles

Este artículo explica el manejo de eventos en JavaScript.

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

Manejo de eventos en JavaScript

El manejo de eventos en JavaScript es un mecanismo para ejecutar acciones específicas en respuesta a operaciones del usuario (como clics e inputs del teclado) o acciones del navegador. Al configurar listeners de eventos, puedes crear páginas web dinámicas e interactivas.

Conceptos básicos de eventos

Los eventos ocurren en respuesta a las operaciones del usuario y acciones del navegador. Cuando ocurre un evento, se ejecuta el controlador de eventos (función) asociado. Por ejemplo, hay eventos como los siguientes:.

Clic (click)
Entrada de teclado (keydown, keyup)
Movimiento del ratón (mousemove, mouseover)
Envío de formulario (submit)
Carga completa de la página (DOMContentLoaded)
Desplazamiento (scroll)

Añadiendo escuchadores de eventos

Los listeners de eventos se configuran usando el método addEventListener(). Este método llama a una función específica cuando ocurre el evento especificado.

Sintaxis básica de `addEventListener()`

1element.addEventListener(event, handler);

element es el elemento HTML que monitorea el evento.
event es el nombre del evento (por ejemplo, click).
handler es la función que se ejecuta cuando ocurre el evento.

Objeto de evento

Cuando ocurre un evento, JavaScript pasa un objeto de evento que contiene los detalles del evento al controlador de eventos. Este objeto incluye información como qué elemento desencadenó el evento y qué tecla fue presionada.

Ejemplo: Usar el objeto de evento

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

Este código utiliza el objeto del evento para mostrar información detallada y el elemento clicado en la consola cuando se hace clic en el botón.

Eventos típicos

Evento de clic

El evento click ocurre cuando el usuario hace clic en un elemento.

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

Este código muestra un mensaje en la consola cuando se hace clic en el elemento.

Eventos de teclado

Los eventos keydown y keyup ocurren cuando el usuario presiona o suelta una tecla. Puedes usar event.key para ver qué tecla fue presionada.

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

Este código muestra el nombre de la tecla en la consola cuando el usuario presiona una tecla.

Eventos del Ratón

Los eventos mousemove y mouseover ocurren cuando el ratón se mueve o pasa sobre un elemento.

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

Este código muestra la posición (coordenadas X e Y) en la consola cada vez que el ratón se mueve.

Eventos de Formulario

Los eventos relacionados con formularios incluyen submit e input. El evento submit ocurre cuando se envía un formulario y usualmente causa la recarga de la página, pero frecuentemente se usa event.preventDefault() para evitar esto.

Ejemplo: Prevenir la recarga de la página al enviar un formulario

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

Este código evita que la página se recargue al enviar el formulario y muestra en su lugar un mensaje en la consola.

Propagación de Eventos (Burbujeo y Captura)

Los eventos se propagan a través de dos etapas: la fase de captura, que viaja desde los elementos padres hacia los hijos, y la fase de burbujeo, que viaja desde los elementos hijos hacia los padres.

Burbujeo de Eventos

Por defecto, los eventos ocurren en el elemento más interno y se propagan hacia afuera. Esto se llama burbujeo.

Ejemplo: Ejemplo de Burbujeo

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

En este ejemplo, cuando haces clic en un botón, el evento del botón ocurre primero, seguido por el evento del elemento padre.

Captura de Eventos

Al especificar true como el tercer argumento en addEventListener(), puedes manejar eventos en la fase de captura.

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

Este código maneja el evento de clic del elemento padre en la fase de captura y muestra un mensaje en la consola.

Previniendo la Propagación con `stopPropagation()`

Puedes detener la propagación de eventos usando event.stopPropagation().

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

Este código evita que el evento se propague cuando se hace clic en el botón y muestra un mensaje en la consola.

Remoción de Eventos

Puedes eliminar listeners de eventos usando removeEventListener(). Para eliminar un listener de eventos, necesitas una referencia a la función especificada en addEventListener().

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

Este código elimina el escuchador del evento de clic del botón para que ya no se maneje al hacer clic.

Eventos Personalizados

En JavaScript, puedes crear y disparar eventos personalizados además de los eventos estándar. Utiliza el constructor CustomEvent.

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

Este código crea y despacha un evento personalizado myCustomEvent y muestra sus detalles en la consola.

Resumen

El manejo de eventos es un elemento esencial para mejorar la interactividad de las aplicaciones web. Al utilizar los componentes del manejo de eventos, puedes ofrecer una experiencia de usuario más flexible y sofisticada.

Event Listener: Usa addEventListener() para establecer un manejador de eventos en un elemento.
Event Object: Cuando ocurre un evento, se pasa un objeto de evento que se puede usar para obtener información detallada.
Event Propagation: Los eventos se propagan en dos fases: burbujeo y captura.
Form Events and Custom Events: Puedes gestionar envíos de formularios y tus propios eventos personalizados.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video

Shadow DOM en JavaScript

Manejo de eventos en JavaScript

YouTube Video

Manejo de eventos en JavaScript

Conceptos básicos de eventos

Añadiendo escuchadores de eventos

Sintaxis básica de addEventListener()

Objeto de evento

Ejemplo: Usar el objeto de evento

Eventos típicos

Evento de clic

Eventos de teclado

Eventos del Ratón

Eventos de Formulario

Ejemplo: Prevenir la recarga de la página al enviar un formulario

Propagación de Eventos (Burbujeo y Captura)

Burbujeo de Eventos

Ejemplo: Ejemplo de Burbujeo

Captura de Eventos

Previniendo la Propagación con stopPropagation()

Remoción de Eventos

Eventos Personalizados

Resumen

YouTube Video

Sintaxis básica de `addEventListener()`

Previniendo la Propagación con `stopPropagation()`