Hoy por hoy casi todos los que trabajamos en entorno web utilizamos JQuery como framework base para la mayoría de nuestros proyectos y a veces es importante conocerlo a detalle para sacarle el mayor partido posible . Hoy hablaré un poco de la gestión de eventos que es algo que todos utilizamos pero que no todos conocemos en profundidad. Utilizamos continuamente eventos como (click, change, submit etc) . Ahora bien ¿como funcionan realmente?. Vamos a ver un ejemplo sencillo .
En este ejemplo disponemos de una lista con un único elemento y un link dentro de ella cuando pulsamos el link nos saldrá un mensaje de Javascript “has pulsado el boton” . A continuación se muestra el código fuente
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.10.2.min.js"> </script> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-1.10.2.min.js"> </script> <script type="text/javascript"> $(document).ready(function(evento) { $("a").click(function(evento) { alert("has pulsado el boton"); evento.preventDefault(); }); }); </script> </head> <body> <ul> <li> <p>Parrafo dentro de una lista <a href="destino.php">ir a pagina de destino</a> </p> </li> </ul> </body> </html>
Lo que mas nos interesa en este caso es el código de Javascript (JQuery) que hemos utilizado para ligar el evento “click” con el mensaje de “alert”. Como podemos ver invoca a la función de alert y luego cancela el evento.
$(document).ready(function(evento) { $("a").click(function(evento) { alert("has pulsado el boton"); evento.preventDefault(); }); });
Cancelar acción
Ahora bien ¿que hace exactamente la linea evento.preventDefault()? . Para la mayor parte de la gente la linea simplemente cancela el evento y al pulsar el enlace no pasamos a la página de destino y simplemente sale el mensaje “has pulsado el boton”.
Así pues esta es la idea que tenemos de lo que sucede .
Sin embargo no es del todo correcta ,en la realidad sucede algo distinto . Cuando nosotros pulsamos el boton lanzamos el evento click , pero ademas se ejecuta la acción de salto de pagina al haber pulsado en un link . Es esta acción la que cancelamos cuando usamos el método evento.preventDefault() de JQuery.
Event Bubling
¿Que sucede entonces con el evento que hemos lanzado? . Pues sigue fluyendo hacia arriba por la estructura de etiquetas HTML. Esto nos permitirá capturarlo si fuera necesario a nivel de otra etiqueta.
Vamos a ver un sencillo ejemplo en código de como el evento sube como una burbuja hasta la etiqueta <html> y es capturado por todas.
$(document).ready(function(evento) { $("a").click(function(evento) { alert("has pulsado el boton"); evento.preventDefault(); }); $("li").click(function(evento) { console.log("el evento llega al LI "); }); $("ul").click(function(evento) { console.log("el evento llega al UL "); }); $("body").click(function(evento) { console.log("el evento llega al BODY "); }); $("html").click(function(evento) { console.log("el evento llega al HTML "); }); });
Vemos a continuación como a traves de la consola se imprimen los distintos mensajes de captura del evento en cada una de las etiquetas . Este comportamiento es conocido habituralmente como “event bubbling”.
Cancelar Evento
Si queremos cancelar la propagación del evento podemos definir el código de la siguiente forma
$("a").click(function(evento) { alert("has pulsado el boton"); return false; });
La linea de return false cancela tanto la acción de salto de página como el propio evento click .
Cancelar propagación
Puede ser que en algún momento queramos tener un control mas exhaustivo de la gestión de eventos .En ese caso podemos cancelar el bubbling del evento a la altura que necesitemos utilizando el método stopPropagation() .
$(document).ready(function(evento) { $("a").click(function(evento) { alert("has pulsado el boton"); evento.preventDefault(); }); $("li").click(function(evento) { console.log("el evento llega al LI "); evento.stopPropagation(); }); $("ul").click(function(evento) { console.log("el evento llega al UL "); }); $("body").click(function(evento) { console.log("el evento llega al BODY "); }); $("html").click(function(evento) { console.log("el evento llega al HTML "); }); });
Hemos visto en este articulo las diferencias entre las siguientes opciones a nivel de control de eventos y su propagación.
- return false;
- evento.preventDefault()
- evento.stopPropagation()
Conocer las diferencias de cada uno nos será útil en el trabajo del día a día.
[…] artículos relacionados: jQuery Event Bubbling , jQuery WrapperSet ,jQuery find vs […]
Entonces en el último ejemplo, porqué no usas retunrn false ??
Porque estoy a nivel de etiqueta que es la última.
Conocía el efecto bubbling de Java pero desconocía cómo funcionaba en JavaScript, se agradece la explicación.