7.1 Event Bubbling (Propagación de eventos)
En JavaScript, los eventos que ocurren en un elemento pueden propagarse a través del DOM. Este proceso se llama propagación de eventos e incluye dos mecanismos principales: event bubbling (propagación de eventos) y event capturing (captura de eventos).
Mecanismos de propagación de eventos:
- Event Bubbling (Propagación de eventos).
- Event Capturing (Captura de eventos).
Propagación de eventos es el proceso en el cual un evento que ocurre en un elemento hijo se propaga
hacia arriba a través de la cadena de padres hasta el elemento raíz (usualmente document).
Explicación:
- Cuando el botón
childes presionado, primero se activa el manejador de eventos en el elementochild(Child clicked) - Luego, el evento se propaga al elemento
parenty se activa su manejador (Parent clicked)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Captura de eventos)
Captura de eventos es el proceso en el cual un evento se propaga primero desde el elemento raíz hacia abajo a través de la cadena de padres hasta el elemento objetivo donde ocurrió el evento.
Para usar la captura de eventos, hay que establecer el parámetro capture a true al añadir el manejador de eventos.
Explicación:
-
Cuando el botón
childes presionado, primero se activa el manejador de eventos en el elemento parent (Parent clicked) gracias a que se estableció el parámetrocaptureentrue -
Luego el evento llega al elemento objetivo
childy se activa su manejador (Child clicked)
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Modelo de propagación de eventos en tres fases
En el proceso de manejo de eventos en el DOM, hay tres fases involucradas:
1. Capturing Phase (Fase de captura). El evento se propaga desde el elemento raíz (generalmente document) hacia abajo a través de la cadena de padres hasta el elemento objetivo.
2. Target Phase (Fase objetivo). El evento alcanza el elemento objetivo donde ocurrió el evento.
3. Bubbling Phase (Fase de propagación). El evento se propaga desde el elemento objetivo hacia arriba a través de la cadena de padres hasta el elemento raíz.
Control de la propagación de eventos
Existen métodos para controlar la propagación de eventos:
stopPropagation(). Detiene la propagación del evento tanto durante la fase de propagación como en la de captura.stopImmediatePropagation(). Detiene la propagación del evento y previene la ejecución de otros manejadores de eventos en el elemento actual.preventDefault(). Cancela la acción por defecto asociada con el evento (por ejemplo, enviar un formulario al presionar un botón).
7.4 Ejemplo del uso de stopPropagation
Explicación:
- Cuando se presiona el botón
child, se activa el manejador de eventos en el elementochild(Child clicked) - La propagación del evento se detiene usando
event.stopPropagation(), y el manejador de eventos en el elemento parent no se activa
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Detiene la propagación del evento
});
</script>
</body>
</html>
GO TO FULL VERSION