El burbujeo de eventos es un método de propagación de eventos en la API HTML DOM cuando un evento está en un elemento dentro de otro elemento y ambos elementos han registrado un identificador para ese evento. Es un proceso que comienza con el elemento que desencadenó el evento y luego asciende a los elementos que lo contienen en la jerarquía. En el burbujeo de eventos, el evento primero es capturado y manejado por el elemento más interno y luego se propaga a los elementos externos.
Sintaxis:
addEventListener(type, listener, useCapture)
- type : Se usa para referirse al tipo de evento.
- listener : Función a la que queremos llamar cuando ocurra el evento del tipo especificado.
- userCapture : valor booleano. El valor booleano indica la fase del evento. Por defecto useCapture es falso. Significa que está en la fase de burbujeo.
Ejemplo 1: este ejemplo muestra el funcionamiento de la difusión de eventos en JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bubbling Event in Javascript
</title>
</head>
<body>
<h2>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>
Producción:
Producción
Después de hacer clic en el botón principal:
Después de hacer clic en el botón principal
Después de hacer clic en el botón Niño:
Después de hacer clic en el botón Niño
Después de hacer clic en el botón Niño
Del ejemplo anterior, entendemos que al burbujear, el evento del elemento más interno se maneja primero y luego el externo: el evento de clic del elemento <p> se maneja primero, luego el evento de clic del elemento <div>.