Diferencia entre event.stopPropagation y event.preventDefault en JavaScript
- Concepto de Propagación
- Fases de Propagación
-
el
stopPropagation()en JavaScript -
el
preventDefault()en JavaScript
En este artículo, aprenderemos el propósito de stopPropagation() y su trabajo en el código fuente de JavaScript. También veremos cómo podemos usar un evento stopPropagation() para evitar la propagación en JavaScript.
Concepto de Propagación
En el desarrollo web, el DOM se considera un árbol que contiene elementos como (padre, hijo y hermanos) que están relacionados entre sí. La propagación es un concepto de eventos que viajan a través del árbol del Modelo de objetos del documento (DOM).
Para comprender mejor la propagación, usaremos un cable eléctrico como ejemplo, en el que el flujo de corriente corre por un cable hasta que alcanza su destino definido. Los eventos se pasan a través de cada nodo en el DOM hasta que llega al último nodo.
Fases de Propagación
El burbujeo y la captura de eventos son las fases de propagación. En palabras simples, Burbujear viaja desde el nodo objetivo hasta la raíz, y Capturar viaja inversamente a Burbujear; viaja desde el nodo raíz hasta el destino.
El nodo DOM, que se utiliza para desencadenar un evento como un clic de botón, se conoce como destino, y un botón con un evento de clic es un destino de evento.
el stopPropagation() en JavaScript
En el comportamiento de propagación predeterminado, cuando hacemos clic en un botón, activa todos los controladores de eventos en el camino, que están asociados con el mismo tipo. Este tipo de comportamiento no es factible y provoca problemas de rendimiento.
Para evitar este comportamiento de propagación a través del árbol DOM, usamos el evento stopPropagation(). Con ese evento, podemos ejecutar el único controlador de eventos desde el que se activó.
Sintaxis básica:
event.stopPropagation()
El método stopPropagation() se utiliza para evitar que se llame al comportamiento de propagación del mismo evento.
Código de ejemplo:
<!DOCTYPE html>
<html>
<body>
<style>
.myDiv {
border: 2px outset black;
padding: 30px;
text-align: center;
}
</style>
<h1 style="color:blueviolet">DelftStack Learning</h1>
<h3>JavaScript stop propagation event</h3>
<p>Click on CHILD DIV</p>
<div class="myDiv" onclick="parentFunction()">
PARENT DIV
<div class="myDiv" onclick="childFunction(event)">CHILD DIV</div>
</div>
Prevent Propagation:
<input type="checkbox" id="check">
<script>
function childFunction(event) {
console.log("Child div event executed ..");
if (document.getElementById("check").checked) {
event.stopPropagation(); // preventing propagation
}
}
function parentFunction() {
console.log("Parent div event executed ..");
}
</script>
</body>
</html>
Salida con propagación:
Salida sin propagación:
En la fuente HTML anterior, creamos el div Child dentro del div Parent, y en el evento onClick de ese div, llamamos a funciones separadas.
En las etiquetas <script>, hemos declarado parentfunction() y childFunction() en las que hemos mostrado el evento ejecutado en logs. En childFunction(), pasamos evento como argumento y usamos ese evento para detener la propagación.
Hemos creado un elemento de casilla de verificación para obtener el estado actual de un usuario si desea evitar la propagación o no. En childFunction(), usamos una declaración condicional para averiguar si la casilla de verificación está marcada o no.
Si está marcado, simplemente llamamos event.stopPropagation(); para evitar la propagación. Si el usuario hace clic en CHILD DIV junto con la selección de la casilla de verificación, solo se ejecutará childFunction(); de lo contrario, se ejecutarán ambas funciones.
Guarde la fuente anterior con la extensión HTML y ábrala en un navegador. Abra el modo depurador junto con la pestaña de la consola para ver los resultados.
el preventDefault() en JavaScript
El método event.stopPropagation() no es útil para detener cualquier comportamiento predeterminado de los elementos HTML, como hacer clic en un enlace o marcar una casilla. Para lograr esto, podemos usar event.preventDefault().
Impide la acción predeterminada que realiza el navegador en ese evento. Entonces, si usamos el método preventDefault(), solo se evita la acción predeterminada del navegador, pero el controlador de clics de nuestro div aún se activa.
Código de ejemplo:
function childFunction(event) {
console.log('Child div event executed ..');
if (document.getElementById('check').checked) {
event.preventDefault(); // preventing default action
}
}
En la función de JavaScript anterior childFunction(), acabamos de reemplazar event.stopPropagation() con event.preventDefault() para ver la diferencia de comportamiento en los registros.