Diferencia entre el burbujeo y la captura de eventos en JavaScript
Este artículo hablará sobre el burbujeo de eventos y la captura de eventos utilizados en JavaScript. Después de leer este artículo, comprenderá claramente el burbujeo y la captura de eventos en JavaScript.
También discutiremos las diferencias entre estos eventos. Veremos cuándo usar el burbujeo y la captura de eventos en JavaScript.
En JavaScript, el burbujeo y la captura de eventos describen fases en la forma en que el navegador maneja los eventos dirigidos a elementos anidados.
Entendamos estos dos eventos uno por uno.
Burbujeo de eventos en JavaScript
El burbujeo de eventos es un método de propagación de eventos utilizado en JavaScript. La difusión de eventos es un proceso que comienza con el elemento que desencadena el evento y aumenta los elementos que lo contienen en orden.
Usando el burbujeo de eventos en JavaScript, el evento primero es capturado y manejado por el elemento más interno y luego propagado a los elementos más externos.
El principio del burbujeo de eventos es muy simple. Cuando ocurre un evento en otro elemento, primero se ejecuta en los controladores y luego en su elemento principal.
Se relaciona con el orden en que los eventos se propagan en elementos anidados en JavaScript.
Entendamos el evento burbujeante con la ayuda del siguiente cuadro.
La imagen de arriba muestra que cuando un usuario hace clic en el botón, el evento fluye en este orden de abajo hacia arriba.
Ahora comprendamos el evento burbujeante con la ayuda de un código de ejemplo.
Como podemos ver, tenemos un código HTML en el que creamos dos botones, padre y hijo. Almacenamos el botón padre en <div> y el botón hijo en <p>.
En el código a continuación, usamos JavaScript, y en el script, usamos un objeto .addEventListener para realizar el evento burbujeante.
Tendremos dos eventos mostrados cuando ejecutemos este código: padre y hijo. El evento hijo es el elemento más interno, y el evento padre es el elemento más externo.
Código de ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
The Bubbling_Event in Javascript
</title>
</head>
<body>
<h2>The Bubbling_Event in Javascript</h2>
<div id="parent">
<button>
<h2>Parent</h2>
</button>
<button id="child">
<p>Child</p>
</button>
</div><br>
<script>
document.getElementById(
"child").addEventListener("click", function () {
alert("YOU CLICKED THE CHILD ELEMENT.");
}, false);
document.getElementById(
"parent").addEventListener("click", function () {
alert("YOU CLICKED THE PARENT ELEMENT.");
}, false);
</script>
</body>
</html>
La salida después de ejecutar el código:
Cuando hacemos clic en el botón principal, obtenemos el siguiente resultado:
Cuando hacemos clic en el botón hijo, obtenemos el siguiente resultado:
Del código de ejemplo anterior, vemos que en el burbujeo de eventos, el evento del elemento más interno se activa primero y luego sigue al elemento del evento más externo. Primero se maneja el elemento <p>, luego el <div>.
Entonces, usamos el evento burbujeante cuando necesitamos manejar el elemento más interno en JavaScript.
Acceda a la demostración del código de ejemplo anterior aquí.
Captura de eventos en JavaScript
La captura de eventos rara vez se usa en código real, pero a veces puede ser muy útil. La captura de eventos es lo opuesto al burbujeo de eventos; el elemento más externo es el objetivo primero en la captura de eventos.
En JavaScript, usamos la captura de eventos cuando necesitamos manejar primero el evento del elemento más externo. La captura de eventos se realiza antes de la difusión de eventos, pero rara vez se usa porque la difusión de eventos es suficiente para manejar el flujo de eventos en JavaScript.
El diagrama de flujo para comprender la captura de eventos se proporciona a continuación. La imagen muestra que cuando un usuario hace clic en el botón, el evento fluye en este orden, de arriba a abajo.
Ahora, comprendamos la captura de eventos con la ayuda de un código de ejemplo.
Como podemos ver en el siguiente código, hemos creado un botón en el elemento <div>. También usamos JavaScript en el siguiente código HTML en el que usamos el objeto .addEventListener, que realiza la captura de eventos.
Cuando ejecutamos este código y hacemos clic en el botón Click Me, la consola generará el siguiente resultado.
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>What is Event Capturing in JavaScript</title>
</head>
<body>
<div class="button-list">
<div class="button-container">
<button class="button"
onClick="console.log('Button!')">
Click Me
</button>
</div>
</div>
<script>
document.addEventListener("click", () =>
console.log('Event Capturing!'), true);
document.addEventListener("click", () =>
console.log('Event Bubbling!'), false);
</script>
</body>
</html>
La salida del código:
Como podemos ver, usando la captura de eventos en JavaScript, los eventos se manejan en el orden esperado.
Acceda a la demostración del código de ejemplo anterior aquí.
La principal diferencia entre estos dos eventos es que el evento burbujeante primero maneja los eventos desde el más interno hasta el más externo, y el evento que captura primero maneja el evento del elemento más externo.
Después de leer este artículo, esperamos haberle mostrado cómo funciona la creación de burbujas y la captura de eventos en JavaScript.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn