En este artículo, aprenderemos sobre la propagación, captura y burbujeo de eventos.
La propagación de eventos determina en qué orden los elementos reciben el evento. Hay dos formas de manejar este orden de propagación de eventos de HTML DOM: difusión de eventos y captura de eventos.
Por ejemplo, supongamos que hay tres componentes, a saber , componente1 , componente2 , componente3. Dentro de estos componentes, adjuntamos los controladores de eventos onClickEventListener . Ahora, cuando hagamos clic en el componente 3, se ejecutará el controlador de eventos para los tres componentes. Ahora aquí la pregunta es en qué orden se ejecutará el evento. Ahora, en este punto, el burbujeo y la captura de eventos entran en escena.
1. Burbujeo: cuando ocurre un evento en un componente, primero ejecuta el controlador de eventos en él, luego en su componente principal y luego en los componentes de otros ancestros. De forma predeterminada, todos los eventos se manejan a través de este orden desde el evento del componente central hasta el evento del componente más externo.
Ejemplo: en este ejemplo, crearemos tres componentes div y cada componente tendrá un controlador de eventos. Cuando hacemos clic en el componente 3, dará una alerta como «se hizo clic en el evento del componente 3», luego se mostrarán las alertas «se hizo clic en el evento del componente 2» y «se hizo clic en el evento del componente 1». Así es como ocurre el burbujeo de eventos de «abajo hacia arriba».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: lightgreen;
padding: 24px;
border: 1px solid black;
}
#div2 {
background-color: yellow;
padding: 18px;
border: 1px solid black;
}
#div3 {
background-color: orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksForGeeks</h1>
<h3>What is Event propagation, capturing, bubbling?</h3>
<div id="div1">
Component 1
<div id="div2">
component 2
<div id="div3">
component 3
</div>
</div>
</div>
<!-- Javascript code for event bubbling -->
<script>
let div1 = document.querySelector("#div1");
let div2 = document.querySelector("#div2");
let div3 = document.querySelector("#div3");
div1.addEventListener("click", function (event) {
alert("Component 1 event clicked");
});
div2.addEventListener("click", function (event) {
alert("Component 2 event clicked");
});
div3.addEventListener("click", function (event) {
alert("Component 3 event clicked");
});
</script>
</body>
</html>
Producción:
2. Capturar: Es lo contrario a burbujear. El controlador de eventos está primero en su componente principal y luego en el componente donde realmente se quería activar ese controlador de eventos. En resumen, significa que el evento primero es capturado por el elemento más externo y propagado a los elementos internos. También se le llama goteo.
Ejemplo: en este ejemplo, crearemos tres componentes div y cada componente tendrá un controlador de eventos. Cuando hacemos clic en el evento div componente 3, dará una alerta como «se hizo clic en el evento del componente 1» y luego se mostrarán las alertas «se hizo clic en el evento del componente 2» y luego «se hizo clic en el evento del componente 3». Así es como ocurre la captura o filtrado de eventos de «arriba a abajo».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
background-color: lightgreen;
padding: 24px;
border: 1px solid black;
}
#div2 {
background-color: yellow;
padding: 18px;
border: 1px solid black;
}
#div3 {
background-color: orange;
border: 1px solid black;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksForGeeks</h1>
<h3>What is Event propagation, capturing, bubbling?</h3>
<div id="div1">
Component 1
<div id="div2">
component 2
<div id="div3">
component 3
</div>
</div>
</div>
<!-- Javascript code for event capturing -->
<script>
let div1 = document.querySelector("#div1");
let div2 = document.querySelector("#div2");
let div3 = document.querySelector("#div3");
div1.addEventListener("click", function (event) {
alert("Component 1 event clicked");
}, true);
div2.addEventListener("click", function (event) {
alert("Component 2 event clicked");
}, true);
div3.addEventListener("click", function (event) {
alert("Component 3 event clicked");
}, true);
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por devendrasalunke y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA